/*
 * TerraBrasilis Dashboard Design System: componentes de referência
 *
 * Depende de tokens.css. Convenções:
 *   .bloco / .bloco-elemento        estrutura e aparência
 *   .is-* / .has-*                  estado visual sem semântica ARIA equivalente
 *   [aria-*]                        estado com semântica (fonte única de verdade)
 *   [data-*]                        identidade, configuração e ganchos de JS
 * Nenhuma regra visual usa seletores de id.
 */

/* ================================================================
   BASE
   ================================================================ */
.tb-root, .tb-root * { box-sizing: border-box; }
.tb-root {
  margin: 0;
  background: var(--tb-color-page);
  color: var(--tb-color-text);
  font: var(--tb-text-body);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
.tb-root :where(button, input, select, textarea) { font: inherit; color: inherit; }
.tb-root :where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: var(--tb-focus-outline);
  outline-offset: var(--tb-focus-offset);
}
.tb-root :where(h1, h2, h3, h4, p) { margin: 0; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.tb-icon,
.graph-title::before {
  font-family: "Material Icons";
  font-weight: normal; font-style: normal;
  font-size: 20px; line-height: 1;
  display: inline-block; flex: none;
  letter-spacing: normal; text-transform: none; white-space: nowrap;
  -webkit-font-feature-settings: "liga"; font-feature-settings: "liga";
}
.eyebrow {
  font: var(--tb-text-eyebrow);
  letter-spacing: var(--tb-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tb-color-brand);
}
.num { font-variant-numeric: tabular-nums; }

/* ================================================================
   SHELL: painel lateral, barra superior, conteúdo, rodapé
   ================================================================ */
.app-shell {
  display: grid;
  grid-template-columns: var(--tb-sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
}
.app-shell-dashboard { height: 100vh; }
@supports (height: 100dvh) {
  .app-shell-dashboard { height: 100dvh; }
}
.app-shell[data-sidebar="closed"] { grid-template-columns: 0 minmax(0, 1fr); }

/* Painel lateral */
.app-sidebar {
  position: sticky; top: 0;
  z-index: var(--tb-z-sidebar);
  height: 100vh;
  overflow: hidden auto;
  background: var(--tb-sidebar-bg);
  color: var(--tb-sidebar-text);
  box-shadow: var(--tb-elevation-bar);
  transition: transform var(--tb-duration) var(--tb-easing), visibility var(--tb-duration);
}
.app-shell[data-sidebar="closed"] .app-sidebar { visibility: hidden; transform: translateX(-100%); }
.app-shell[data-sidebar="open"] .app-sidebar { transition: transform var(--tb-duration) var(--tb-easing), visibility 0s; }

.sidebar-header {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  height: var(--tb-sidebar-header-height);
  padding: 4px 20px 18px;
  background: var(--tb-color-brand) url("../img/i-mapa2.jpg") center / cover no-repeat;
  color: var(--tb-color-on-brand);
  text-align: center;
  text-decoration: none;
}
.sidebar-brand { font: 500 1.25rem/1.2 var(--tb-font-ui); }
.wordmark-terra { color: var(--tb-color-wordmark-terra); }
.wordmark-brasilis { color: var(--tb-color-wordmark-brasilis); }
.sidebar-product { margin-top: 2px; font: 400 0.8125rem/1.15 var(--tb-font-ui); }

.sidebar-nav { padding-bottom: var(--tb-space-6); }
/* --sidebar-hover-color é a cor da borda no hover de tudo o que fica na seção: a faixa de seção a define e os grupos e as camadas a herdam */
.sidebar-section {
  --sidebar-hover-color: color-mix(in srgb, var(--tb-sidebar-section-bg), black 20%);
  margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--tb-sidebar-divider);
}
.sidebar-section-title {
  display: flex; align-items: center; justify-content: space-between; gap: var(--tb-space-2);
  height: var(--tb-sidebar-section-height); margin: 0; padding: 0 var(--tb-space-3);
  background: var(--tb-sidebar-section-bg);
  color: var(--tb-sidebar-section-text);
  font: var(--tb-text-panel-title);
  /* Mesma regra dos cabeçalhos de cartão: linha de 1 px embaixo, branca em repouso e escurecida no hover, que também escurece a faixa */
  border-bottom: 1px solid #fff;
  transition: background-color var(--tb-duration) var(--tb-easing), border-color var(--tb-duration) var(--tb-easing);
}
.sidebar-section-title:hover { background: color-mix(in srgb, var(--tb-sidebar-section-bg), black 10%); }
.sidebar-section:hover .sidebar-section-title { border-bottom-color: var(--sidebar-hover-color); }
.sidebar-link {
  display: flex; align-items: center; gap: var(--tb-space-3);
  width: 100%; min-height: var(--tb-sidebar-item-height);
  padding: 10px;
  border: 0; background: transparent;
  color: var(--tb-sidebar-text);
  font: var(--tb-text-nav);
  text-align: left; text-decoration: none; cursor: pointer;
  transition: background-color var(--tb-duration) var(--tb-easing), color var(--tb-duration) var(--tb-easing);
}
.sidebar-link .tb-icon { font-size: 24px; color: var(--tb-sidebar-text); }
.sidebar-link:hover { background: var(--tb-sidebar-item-hover-bg); color: var(--tb-color-brand); }
.sidebar-link[aria-current="page"],
.sidebar-link[aria-current="true"],
.sidebar-link.is-hovered { background: var(--tb-sidebar-item-active-bg); font-weight: 500; }
/* Com o mouse sobre um cartão, só o item dele aparece ativo, mesmo que outro seja o da rolagem */
.sidebar-nav:has(.sidebar-link.is-hovered) .sidebar-link[aria-current="true"]:not(.is-hovered) { background: transparent; font-weight: 400; }
.sidebar-link:focus-visible { outline-offset: -3px; }

/* Painel lateral que enche a altura (visualizador de mapa): o cabeçalho e as faixas ficam parados e só a seção .sidebar-section-grow rola */
.app-sidebar.is-fill { display: flex; flex-direction: column; overflow: hidden; }
.app-sidebar.is-fill .sidebar-header { flex: none; }
.app-sidebar.is-fill .sidebar-nav { display: flex; flex: 1; flex-direction: column; min-height: 0; padding-bottom: 0; }
.app-sidebar.is-fill .sidebar-section { flex: none; }
.app-sidebar.is-fill .sidebar-section-grow { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.sidebar-link[aria-disabled="true"] { color: var(--tb-color-text-disabled); cursor: default; }
.sidebar-link[aria-disabled="true"] .tb-icon { color: var(--tb-color-text-disabled); }
.sidebar-link[aria-disabled="true"]:hover { background: transparent; color: var(--tb-color-text-disabled); }

/* Área principal: contêiner de consulta para barra e conteúdo */
.app-main { container: app / inline-size; min-width: 0; display: flex; flex-direction: column; }
.app-shell-dashboard .app-main { height: 100%; min-height: 0; overflow: hidden; }

/* Barra superior */
.app-header {
  position: sticky; top: 0; z-index: var(--tb-z-navbar);
  display: flex; align-items: center; gap: var(--tb-space-2);
  height: var(--tb-navbar-height);
  /* Mesma margem lateral do conteúdo, para o cabeçalho e o painel ficarem alinhados */
  padding: 0 var(--tb-content-gutter);
  background: var(--tb-color-brand);
  color: var(--tb-color-on-brand);
  box-shadow: var(--tb-elevation-bar);
}
.app-header-toggle, .app-header-more {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border: 0; border-radius: var(--tb-radius-md);
  background: transparent; color: inherit; cursor: pointer;
}
.app-header-toggle:hover, .app-header-more:hover, .dialog-heading .icon-button:hover { background: rgb(255 255 255 / 12%); }
.app-header :focus-visible, .dialog-heading :focus-visible { outline-color: #fff; }
.app-header-more { display: none; }
.app-brand {
  display: flex; align-items: baseline; gap: var(--tb-space-2); min-width: 0;
  color: inherit; text-decoration: none; white-space: nowrap;
  font: 400 1.25rem/1 var(--tb-font-ui);
}
.app-brand-product { overflow: hidden; text-overflow: ellipsis; font: 400 1rem/1 var(--tb-font-ui); }
.app-brand-product::before { content: "|"; margin-right: var(--tb-space-2); }

/* Links globais do TerraBrasilis */
.app-header-nav { margin-left: auto; }
.app-nav-list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.app-nav-item { position: relative; }
.app-nav-link {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 40px; padding: 0 10px;
  border: 0; border-radius: var(--tb-radius-md);
  background: transparent; color: inherit;
  font: 500 0.875rem/1 var(--tb-font-ui);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.app-nav-link:hover { background: rgb(255 255 255 / 12%); }
.app-nav-link .app-nav-icon { display: none; }
.app-nav-caret { font-size: 20px; transition: transform var(--tb-duration) var(--tb-easing); }
.app-nav-link[aria-expanded="true"] .app-nav-caret { transform: rotate(180deg); }
.app-nav-flag img { display: block; width: 28px; height: 28px; }
.app-nav-flag[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--tb-color-wordmark-terra); border-radius: 0; }
.app-nav-account .tb-icon { font-size: 28px; }
.app-nav-divider { display: none; }

.app-submenu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 1;
  min-width: 230px; margin: 0; padding: var(--tb-space-1);
  list-style: none;
  border-radius: var(--tb-radius-lg);
  background: var(--tb-color-surface); color: var(--tb-color-text);
  box-shadow: var(--tb-elevation-2);
}
.app-submenu[hidden] { display: none; }
.app-submenu a {
  display: flex; align-items: center; gap: var(--tb-space-3);
  min-height: 40px; padding: var(--tb-space-2) var(--tb-space-3);
  border-radius: var(--tb-radius-sm);
  color: inherit; text-decoration: none; font: var(--tb-text-body);
}
.app-submenu a:hover { background: var(--tb-color-surface-hover); color: var(--tb-color-brand-strong); }
.app-submenu .tb-icon { color: var(--tb-color-text-secondary); }
.app-submenu a:focus-visible { outline-color: var(--tb-color-focus-ring); outline-offset: -2px; }

/* Barra estreita: preserva a marca e recolhe os links no menu */
@container app (max-width: 767.98px) {
  .app-header { height: var(--tb-navbar-height); }
  .app-brand { flex: 1; margin-inline: 0; gap: 4px; font-size: clamp(0.8rem, 4vw, 1rem); }
  .app-brand-product {
    display: inline; flex: none; overflow: visible; text-overflow: clip;
    font-size: clamp(0.7rem, 3.5vw, 0.875rem);
  }
  .app-brand-product::before { display: inline; margin-right: 4px; }
  .app-header-more { display: grid; }
  .app-header-nav {
    position: absolute; top: calc(100% + 4px); right: var(--tb-space-2);
    display: none;
    width: min(320px, calc(100% - 16px)); max-height: calc(100vh - var(--tb-navbar-height) - 16px);
    overflow: auto; padding: var(--tb-space-2);
    border-radius: var(--tb-radius-lg);
    background: var(--tb-color-surface); color: var(--tb-color-text);
    box-shadow: var(--tb-elevation-3);
  }
  .app-header-nav.is-open { display: block; }
  .app-header-nav :focus-visible { outline-color: var(--tb-color-focus-ring); outline-offset: -2px; }
  .app-nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .app-nav-link { width: 100%; min-height: var(--tb-target-touch); gap: var(--tb-space-3); padding: 0 var(--tb-space-3); font: 400 0.9375rem/1.2 var(--tb-font-ui); }
  .app-nav-link:hover { background: var(--tb-color-surface-hover); }
  .app-nav-link .app-nav-icon { display: inline-block; font-size: 22px; color: var(--tb-color-text-secondary); }
  .app-submenu { position: static; min-width: 0; padding: 0 0 var(--tb-space-1) 34px; box-shadow: none; }
  .app-nav-divider { display: block; height: 1px; margin: var(--tb-space-2) 0; background: var(--tb-color-border); }
  .app-nav-flag[aria-pressed="true"] { box-shadow: none; background: var(--tb-color-selected-bg); }
  .app-nav-account .tb-icon { font-size: 26px; color: var(--tb-color-text-secondary); }
}

/* Conteúdo: ocupa toda a área ao lado do painel lateral, só com as margens laterais */
.dashboard-content {
  container: dashboard / inline-size;
  width: 100%;
  padding: 0 var(--tb-content-gutter);
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
/* O espaço de cima fica no primeiro bloco, não no contêiner que rola: o resumo fixo gruda no topo da área, sem folga */
.dashboard-intro { margin-bottom: var(--tb-space-4); padding-top: var(--tb-space-5); }
.dashboard-intro h1 { font: var(--tb-text-display); color: var(--tb-color-text); }
.dashboard-intro p { margin-top: var(--tb-space-1); color: var(--tb-color-text-muted); font: var(--tb-text-small); }
.dashboard-section-heading {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--tb-space-5);
  margin: var(--tb-space-5) 0 var(--tb-space-3);
}
.dashboard-section-heading h2 { font: var(--tb-text-title); }

/* Rodapé */
/* Nome e selo da licença no centro, versão à direita; as colunas laterais nunca se sobrepõem ao centro */
.app-footer {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr); align-items: center; gap: var(--tb-space-3);
  min-height: var(--tb-footer-height); margin-top: 0; padding: var(--tb-space-2) var(--tb-space-4); flex: none;
  background: var(--tb-color-brand); color: var(--tb-color-on-brand);
  font: var(--tb-text-caption);
}
.app-footer-brand { grid-column: 2; display: inline-flex; align-items: center; gap: var(--tb-space-2); }
.app-footer-license { display: inline-flex; }
.app-footer-license img { display: block; }
.app-footer-version { grid-column: 3; justify-self: end; white-space: nowrap; }

/* Painel lateral em janelas abaixo de 992 px: sobreposto, com fundo de bloqueio */
.sidebar-backdrop { display: none; }
@media (max-width: 991.98px) {
  .app-shell, .app-shell[data-sidebar="closed"] { grid-template-columns: minmax(0, 1fr); }
  .app-sidebar { position: fixed; inset: 0 auto 0 0; width: min(var(--tb-sidebar-width), 86vw); }
  .app-shell[data-sidebar="open"] .sidebar-backdrop {
    display: block; position: fixed; inset: 0; z-index: calc(var(--tb-z-sidebar) - 1);
    background: rgb(24 39 31 / 46%);
  }
}

/* ================================================================
   BOTÕES
   ================================================================ */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tb-target-min);
  padding: 6px 12px;
  border: 1px solid var(--tb-color-border-control);
  border-radius: var(--tb-radius-md);
  background: var(--tb-color-surface);
  color: var(--tb-color-text);
  font: 500 0.8125rem/1.2 var(--tb-font-ui);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--tb-duration) var(--tb-easing), border-color var(--tb-duration) var(--tb-easing);
}
.button[hidden], .icon-button[hidden] { display: none; }
.button .tb-icon { font-size: 18px; }
.button:disabled, .button[aria-disabled="true"] { color: var(--tb-color-text-disabled); background: var(--tb-color-surface); border-color: var(--tb-color-border); cursor: default; }
.button-primary { border-color: var(--tb-color-brand); background: var(--tb-color-brand); color: var(--tb-color-on-brand); }
.button-primary:hover:not(:disabled) { border-color: var(--tb-color-brand-strong); background: var(--tb-color-brand-strong); }
.button-secondary { border-color: var(--tb-ref-teal-300); color: var(--tb-color-brand-strong); }
.button-secondary:hover:not(:disabled) { border-color: var(--tb-color-brand); background: var(--tb-color-brand-subtle); }
.button-secondary[aria-expanded="true"] { border-color: var(--dimension-color, var(--tb-color-brand)); background: var(--tb-color-brand-subtle); }
.button-quiet { border-color: transparent; background: transparent; color: var(--tb-color-text-secondary); }
.button-quiet:hover:not(:disabled) { background: var(--tb-color-surface-hover); color: var(--tb-color-brand-strong); }
.button-text {
  min-height: 0; padding: 2px 0; border: 0; border-radius: var(--tb-radius-sm); background: none;
  color: var(--tb-color-link); text-decoration: underline; text-underline-offset: 2px; font-weight: 400; cursor: pointer;
}
.icon-button {
  display: inline-grid; place-items: center; flex: none;
  width: var(--tb-target-min); height: var(--tb-target-min);
  padding: 0; border: 1px solid transparent; border-radius: var(--tb-radius-sm);
  background: transparent; color: var(--tb-color-text-secondary); cursor: pointer;
}
.icon-button .tb-icon { font-size: 18px; }
.icon-button:hover { background: var(--tb-color-surface-hover); color: var(--tb-color-text); }
.icon-button-sm { width: 24px; height: 24px; }
.icon-button-sm .tb-icon { font-size: 16px; }

/* ================================================================
   CAMPOS: preenchidos, sem borda; foco igual ao dos botões
   ================================================================ */
.field-label { color: var(--tb-color-text-secondary); font: var(--tb-text-label); }
.select {
  width: 100%; min-height: 36px;
  padding: 6px 32px 6px 10px;
  border: 0; border-radius: var(--tb-radius-md);
  background: var(--tb-color-field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234c5c53' stroke-width='1.6'/%3E%3C/svg%3E") right 10px center no-repeat;
  appearance: none; cursor: pointer;
  font: var(--tb-text-small);
  text-overflow: ellipsis;
  transition: background-color var(--tb-duration) var(--tb-easing);
}
.select:hover:not(:disabled) { background-color: var(--tb-color-field-hover); }
.select:disabled { color: var(--tb-color-text-muted); cursor: default; }
.search-field {
  display: flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 var(--tb-space-2);
  border-radius: var(--tb-radius-md);
  background: var(--tb-color-field);
  transition: background-color var(--tb-duration) var(--tb-easing);
}
.search-field:hover { background: var(--tb-color-field-hover); }
.search-field:focus-within { outline: var(--tb-focus-outline); outline-offset: var(--tb-focus-offset); }
.search-field .tb-icon { font-size: 18px; color: var(--tb-color-text-muted); }
.search-input { flex: 1; min-width: 0; border: 0; background: transparent; font: var(--tb-text-body); }
.search-input:focus-visible { outline: none; }
.checkbox-field { display: flex; align-items: flex-start; gap: var(--tb-space-2); font: var(--tb-text-small); color: var(--tb-color-text-secondary); }
.checkbox-field input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--tb-color-brand); }

/* ================================================================
   RESUMO FIXO: sempre duas linhas antes do detalhamento
   ================================================================ */
.summary-card {
  container: summary / inline-size;
  position: sticky; top: 0; z-index: var(--tb-z-summary);
  --card-border-color: var(--tb-color-border);
  margin-bottom: var(--tb-space-4);
  padding: var(--tb-space-3) var(--tb-space-4);
  border: 1px solid var(--card-border-color);
  transition: border-color var(--tb-duration) var(--tb-easing);
  border-radius: var(--tb-radius-lg);
  background: rgb(255 255 255 / 97%);
  box-shadow: var(--tb-elevation-2);
  backdrop-filter: blur(10px);
}
.summary-card.is-stuck { border-radius: 0; }
.summary-row { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: var(--tb-space-4); min-width: 0; }
.summary-row-primary { align-items: flex-end; }
.summary-row-secondary { align-items: center; margin-top: var(--tb-space-2); }
.summary-total-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.summary-total { font: var(--tb-text-kpi); color: var(--tb-color-brand-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.summary-total small { margin-left: 2px; font: 500 0.875rem/1 var(--tb-font-ui); color: var(--tb-color-text-muted); }
.version-block { display: flex; flex-direction: column; gap: 4px; flex: 0 1 340px; min-width: 140px; }
.summary-meta { display: flex; align-items: baseline; gap: var(--tb-space-3); flex: 1; min-width: 0; overflow: hidden; }
.summary-status, .version-description {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--tb-color-text-muted); font: var(--tb-text-caption);
}
.summary-status { flex: 0 1 auto; min-width: 0; }
.version-description { flex: 0 1000 auto; min-width: 0; }
.summary-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.summary-toggle .toggle-icon, .card-toggle .toggle-icon { transition: transform var(--tb-duration) var(--tb-easing); }
.summary-toggle[aria-expanded="true"] .toggle-icon, .card-toggle[aria-expanded="true"] .toggle-icon { transform: rotate(180deg); }
.toggle-label-short { display: none; }
.dimension-summary {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px var(--tb-space-3);
  margin-top: var(--tb-space-2); padding-top: var(--tb-space-2);
  border-top: 1px solid var(--tb-color-border-subtle);
  /* Com muitos filtros, o detalhe rola por dentro e o resumo fixo não cobre o conteúdo */
  max-height: 40vh; overflow-y: auto; overscroll-behavior: contain;
}
.dimension-summary[hidden] { display: none; }
/* Abrir e fechar: altura, espaçamento e opacidade animados em --tb-duration (o JS aplica as classes) */
.dimension-summary { transition: height var(--tb-duration) var(--tb-easing), margin-top var(--tb-duration) var(--tb-easing), padding-top var(--tb-duration) var(--tb-easing), opacity var(--tb-duration) var(--tb-easing); }
.dimension-summary.is-animating { overflow: hidden; }
.dimension-summary.is-closed { margin-top: 0; padding-top: 0; opacity: 0; }
.summary-dimension { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 6px; min-width: 0; }
.summary-dimension-label { padding-top: 4px; color: var(--tb-color-text-secondary); font: var(--tb-text-label); }
.summary-values { display: flex; flex-wrap: wrap; gap: 4px; max-height: 56px; overflow: hidden auto; scrollbar-gutter: stable; }
.all-value { padding: 4px 2px; color: var(--tb-color-text-muted); font: var(--tb-text-caption); }

@container summary (max-width: 899.98px) {
  /* O ano dos dados continua visível: situação e ano passam a ocupar duas linhas */
  .summary-meta { flex-direction: column; align-items: flex-start; gap: 2px; }
  .summary-status, .version-description { max-width: 100%; white-space: normal; }
  .dimension-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container summary (max-width: 599.98px) {
  .summary-row { gap: var(--tb-space-3); }
  /* Situação e ano na largura toda; as ações descem para a linha seguinte */
  .summary-row-secondary { flex-wrap: wrap; row-gap: var(--tb-space-2); }
  .summary-meta { flex-basis: 100%; }
  .summary-actions { margin-left: auto; }
  .version-block { flex-basis: 46%; }
  .toggle-label-long { display: none; }
  .toggle-label-short { display: inline; }
  .summary-actions .button { padding-inline: 8px; }
  .dimension-summary { grid-template-columns: minmax(0, 1fr); max-height: 25vh; }
  .summary-dimension { grid-template-columns: 112px minmax(0, 1fr); }
}
@container summary (max-width: 419.98px) {
  .summary-actions .button > .tb-icon:first-child { display: none; }
}

/* Chip de filtro */
.filter-chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  min-height: 24px; padding: 1px 2px 1px 6px;
  border: 1px solid var(--tb-color-border); border-radius: var(--tb-radius-md);
  background: var(--tb-color-surface-sunken);
  font: var(--tb-text-caption);
}
.chip-swatch { width: 8px; height: 8px; flex: none; border-radius: 2px; background: var(--item-color, var(--dimension-color)); }
.chip-value { overflow-wrap: anywhere; }

/* ================================================================
   COR DA DIMENSÃO: atribuída por data-dimension
   ================================================================ */
[data-dimension="biome"]        { --dimension-color: var(--tb-dim-biome); --dimension-text-color: var(--tb-dim-biome-text); --dimension-icon: "park"; }
[data-dimension="state"]        { --dimension-color: var(--tb-dim-state); --dimension-icon: "flag"; }
[data-dimension="municipality"] { --dimension-color: var(--tb-dim-municipality); --dimension-icon: "location_city"; }
[data-dimension="hierarchy"]    { --dimension-color: var(--tb-dim-hierarchy); --dimension-icon: "account_tree"; }
[data-dimension="source"]       { --dimension-color: var(--tb-dim-source); --dimension-icon: "input"; }
[data-dimension="region"],
[data-dimension="meso"],
[data-dimension="basin"],
[data-dimension="hydro"]        { --dimension-color: var(--tb-dim-hydro); --dimension-icon: "waves"; }
[data-dimension="computo"]      { --dimension-color: var(--tb-dim-computo); --dimension-icon: "account_tree"; }
[data-dimension="carStatus"]    { --dimension-color: var(--tb-dim-car-status); --dimension-icon: "assignment_turned_in"; }
[data-dimension="territory"], [data-dimension="indigenousLand"], [data-dimension="conservationUnit"], [data-dimension="ucGroup"], [data-dimension="ucSphere"] { --dimension-color: var(--tb-dim-territory); --dimension-icon: "landscape"; }

/* ================================================================
   GRADE E CARTÃO DE GRÁFICO
   ================================================================ */
.graph-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tb-graph-gap);
  margin: 0; padding: 0; list-style: none;
}
@container dashboard (min-width: 760px) {
  .graph-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .graph-card-wide, .graph-card.is-search-open { grid-column: 1 / -1; }
}
.graph-card {
  --card-border-color: var(--tb-color-border);
  /* O item do painel lateral leva ao cartão, que para abaixo da barra e do resumo fixos */
  scroll-margin-top: calc(var(--tb-summary-offset) + var(--tb-space-3));
  position: relative;
  display: flex; flex-direction: column; min-width: 0;
  container: graph-card / inline-size;
  height: var(--tb-graph-card-height);
  overflow: clip;
  border: 1px solid var(--card-border-color);
  border-radius: var(--tb-radius-lg);
  background: var(--tb-color-surface);
  box-shadow: var(--tb-elevation-1);
  transition: border-color var(--tb-duration) var(--tb-easing), height var(--tb-duration) var(--tb-easing);
}
.graph-card-wide { height: var(--tb-graph-card-height-wide); }
/* Cartão ajustado ao conteúdo (Situação do CAR, Territórios e unidades): sem a altura padrão, a linha acompanha o cartão
   mais alto e o gráfico tem uma barra de 30 px por valor. Com a busca aberta, volta à altura padrão para a lista rolar. */
.graph-card.is-fit:not(.is-collapsed):not(.is-search-open) { height: auto; }
.graph-card.is-fit:not(.is-search-open) .chart-host { flex: none; width: 100%; min-height: 160px; height: calc(var(--chart-rows, 5) * 30px + 8px); }
/* Recolhido: só o cabeçalho fica visível. A altura do cabeçalho é medida pelo JS em --card-collapsed-height */
.graph-card.is-collapsed { height: var(--card-collapsed-height); }
.graph-card.is-collapsed .graph-heading { border-bottom-color: transparent; }
.graph-heading { flex: none; }
/* Hover de qualquer cartão: borda e borda do cabeçalho em tom suave da cor da dimensão ou, sem dimensão, da cor primária */
.graph-card:hover:not(.has-selection),
.summary-card:hover,
.value-search:hover,
.info-section:hover { --card-border-color: color-mix(in srgb, var(--dimension-color, var(--tb-color-brand)) 45%, var(--tb-color-surface)); }
/* Diálogos seguem a mesma regra, mas a borda assume a cor do cabeçalho */
.tb-dialog:hover { --card-border-color: var(--header-color); }
.graph-card.has-selection { --card-border-color: color-mix(in srgb, var(--dimension-color) 90%, var(--tb-color-surface)); }
/* Cabeçalho em três colunas: dimensão e descrição; área e busca; recolher e expandir */
.graph-heading {
  position: sticky; top: var(--tb-summary-offset); z-index: var(--tb-z-sticky-card-header);
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "title actions toggle";
  align-items: center; gap: var(--tb-space-2) var(--tb-space-3);
  min-height: 56px; padding: var(--tb-space-3);
  border-bottom: 1px solid var(--card-border-color);
  background: var(--tb-color-surface);
}
.graph-heading > :first-child { grid-area: title; min-width: 0; }
.graph-heading > .card-toggle { grid-area: toggle; }
/* Cartão estreito: mantém as três colunas; na coluna do meio, a área fica sobre o botão de busca */
@container graph-card (max-width: 559.98px) {
  .graph-heading-actions { flex-direction: column; align-items: flex-end; gap: var(--tb-space-1); }
}
/* Celular: área e busca descem para uma linha própria, e a descrição usa a largura toda */
@container graph-card (max-width: 479.98px) {
  .graph-heading { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title toggle" "actions actions"; row-gap: var(--tb-space-2); }
  .graph-heading-actions { flex-direction: row; align-items: center; justify-content: space-between; }
}
.graph-heading.is-stuck { border-radius: 0; }
.graph-title { display: flex; align-items: center; gap: var(--tb-space-2); font: var(--tb-text-card-title); }
.graph-title::before { content: var(--dimension-icon); color: var(--dimension-color); }
@supports (content: "a" / "") {
  .graph-title::before { content: var(--dimension-icon) / ""; }
}
.graph-subtitle { margin-top: 2px; color: var(--tb-color-text-muted); font: var(--tb-text-caption); }
.graph-heading-actions { grid-area: actions; display: flex; align-items: center; gap: var(--tb-space-3); }
/* Área do cartão: número em destaque na cor da dimensão, unidade atenuada (como o total do resumo) */
/* Texto na cor da dimensão: o bioma usa um tom mais escuro para alcançar 4,5:1 */
.panel-total { color: var(--dimension-text-color, var(--dimension-color)); font: 700 1rem/1.2 var(--tb-font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.panel-total small { margin-left: 2px; color: var(--tb-color-text-muted); font: var(--tb-text-label); }
.graph-content { display: flex; flex: 1; min-height: 0; min-width: 0; padding: var(--tb-space-3); transition: opacity var(--tb-duration) var(--tb-easing); }
.graph-content[hidden] { display: none; }
.graph-card.is-collapsed .graph-content { opacity: 0; }
.graph-card.is-search-open .graph-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr); gap: var(--tb-space-4); }
.graph-card-wide.is-search-open .graph-content { grid-template-columns: minmax(0, 1.35fr) minmax(360px, .85fr); }
.chart-host { display: flex; flex: 1; min-width: 0; min-height: 0; overflow: hidden; }
.chart-host > svg { display: block; width: 100%; height: 100%; }

/* ================================================================
   MARCAS DE DADOS E ESTADOS
   ================================================================ */
.chart text { font-family: var(--tb-font-ui); fill: var(--tb-data-label); font-size: 12px; }
.chart .axis-tick { font-size: 11px; fill: var(--tb-color-text-muted); }
.chart .axis-unit { font-size: 11px; font-weight: 500; fill: var(--tb-color-text-muted); }
.chart .grid-line { stroke: var(--tb-data-grid); stroke-width: 1; }
.chart .axis-line { stroke: var(--tb-data-axis); stroke-width: 1; }
.chart .bar-track { fill: var(--tb-data-track); }
.chart .value-label { font-size: 11px; font-variant-numeric: tabular-nums; }

.data-item { cursor: pointer; transition: opacity var(--tb-duration) var(--tb-easing); }
.data-item .mark { transition: fill var(--tb-duration) var(--tb-easing), fill-opacity var(--tb-duration) var(--tb-easing); }
.data-item .mark { fill: var(--item-color, var(--dimension-color)); }
.data-item:focus { outline: none; }
.data-item:focus-visible { outline: var(--tb-focus-outline); outline-offset: 2px; }

/* Atenuação: item sem relação com a seleção, o destaque ou o detalhe ampliado */
.data-item.is-muted { opacity: var(--tb-data-muted-opacity); }
.data-item.is-muted .mark { fill: var(--tb-data-muted); }
/* Indisponível: sem área no recorte das outras dimensões. Contorno tracejado, sem
   preenchimento, diferente do valor disponível que só está fora da seleção */
.data-item[aria-disabled="true"] { cursor: not-allowed; opacity: var(--tb-data-unavailable-opacity); }
.data-item[aria-disabled="true"] :is(.bar, .donut-slice) { fill: var(--tb-color-surface); stroke: var(--tb-color-text-disabled); stroke-width: 1; stroke-dasharray: 3 2; }
.data-item[aria-disabled="true"] .category-label { fill: var(--tb-color-text-disabled); }

/* Barras */
.data-item.is-hovered .bar { stroke: var(--tb-data-outline); stroke-width: 1; }
/* Selecionado: contorno e radar na cor da dimensão, como a borda do item da busca */
.data-item[aria-pressed="true"] .bar { stroke: var(--dimension-color); stroke-width: 1; }
.data-item.is-expanded .bar { stroke: var(--dimension-color); stroke-width: 4; }

/* Selecionado: anel que se expande e desaparece ao redor do item (efeito radar).
   Começa depois da transição do redesenho; some com movimento reduzido. */
.selection-pulse {
  fill: none; stroke: var(--item-color, var(--dimension-color)); stroke-width: 1; opacity: 0; pointer-events: none;
  animation: tb-radar 1.8s var(--tb-easing) var(--tb-duration-slow) infinite;
}
@keyframes tb-radar {
  0% { opacity: 0; stroke-width: 1; }
  15% { opacity: 0.9; stroke-width: 2; }
  100% { opacity: 0; stroke-width: 8; }
}
@media (prefers-reduced-motion: reduce) {
  .selection-pulse { display: none; }
}

/* Rosca: sem contorno; o destaque vem da atenuação das demais fatias */
.donut-slice { stroke: var(--tb-data-separator); stroke-width: 2; }

/* Sunburst: o nó e seus ancestrais mantêm a cor e recebem contorno na cor do nó escurecida */
.sunburst-slice { stroke: var(--tb-data-separator); stroke-width: 0.7; }
.chart-sunburst .data-item.is-muted { opacity: 1; }
.chart .sunburst-label { fill: var(--tb-color-text); font-size: 11px; font-weight: 700; paint-order: stroke; stroke: var(--tb-color-surface); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.chart .sunburst-label-depth-3 { font-size: 9px; }
.chart .sunburst-center-label { font-size: 11px; font-weight: 700; }
.chart .sunburst-center-secondary { font-size: 9px; fill: var(--tb-color-text-muted); }
.sunburst-center-circle { fill: var(--tb-color-surface); stroke: var(--tb-color-border); }
.chart-sunburst .data-item.is-muted .mark { fill-opacity: var(--tb-data-muted-opacity-hydro); }
.chart-sunburst .data-item:is(.is-hovered, .is-hover-context) .sunburst-slice { stroke: color-mix(in srgb, var(--item-color), black 45%); stroke-width: 1.7; }
.chart-sunburst .data-item:is([aria-pressed="true"], .is-selected-context) .sunburst-slice { stroke: color-mix(in srgb, var(--item-color), black 45%); stroke-width: 2; }

/* Árvore do cômputo (DES-04): Voronoi circular. Grupos em cores próprias; níveis em tons do grupo */
.voronoi-cell { stroke: var(--tb-color-surface); stroke-width: 1; }
.voronoi-group-outline { fill: none; stroke: var(--tb-color-surface); stroke-width: 3; pointer-events: none; }
/* Todos os rótulos, numa camada acima das células, com contorno claro para ler sobre qualquer cor */
/* O rótulo repassa o ponteiro à célula (destaque, tooltip e clique), como o texto dos outros gráficos */
.chart .computo-label { fill: var(--tb-color-text); font-size: 11px; paint-order: stroke; stroke: var(--tb-color-surface); stroke-width: 3px; stroke-linejoin: round; cursor: pointer; }
.chart .computo-label-name { font-weight: 700; }
.chart .computo-label-value { font-variant-numeric: tabular-nums; }
.chart .computo-leader { fill: none; stroke: var(--tb-color-text-muted); stroke-width: 1; }
.chart .computo-leader-dot { fill: var(--tb-color-text-muted); }
.chart-legend.computo-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tb-space-1) var(--tb-space-3); }
.chart-legend.computo-legend > li { flex: 0 0 auto; }
.chart-legend.computo-legend > li { max-width: 100%; }
.chart-legend.computo-legend .legend-item { width: auto; max-width: 100%; }
.chart-voronoi .data-item.is-muted { opacity: 1; }
.chart-voronoi .data-item.is-muted .mark { fill-opacity: var(--tb-data-muted-opacity-hydro); }
/* O polígono do grupo só serve de área de ligação: não pinta nem traça */
.chart-voronoi .voronoi-cell-depth-1 { fill: none; stroke: none; pointer-events: none; }
/* Destaque e seleção: contorno numa camada acima de todas as células, na cor do nó escurecida */
.voronoi-focus-outline { fill: none; stroke: color-mix(in srgb, var(--item-color), black 45%); stroke-linejoin: round; pointer-events: none; }
.chart-voronoi .data-item[aria-disabled="true"] .voronoi-cell-depth-2 { fill: var(--tb-color-surface); fill-opacity: 1; stroke: var(--tb-color-text-disabled); stroke-width: 1; stroke-dasharray: 3 2; }

/* Cartão com abas (Territórios e unidades): uma dimensão por aba, com um só gráfico visível e a altura do cartão fixa */
/* O cartão composto tem o mesmo cabeçalho e o mesmo corpo do simples; as abas são o início do corpo, fora do cabeçalho, e recolhem com ele */
.graph-card.has-tabs .graph-content { flex-direction: column; padding: 0; }
.graph-card.has-tabs .tab-panel { padding: var(--tb-space-3); }
.card-tabs {
  display: flex; flex: none; gap: var(--tb-space-1); padding: 0 var(--tb-space-3);
  border-bottom: 1px solid var(--card-border-color, var(--tb-color-border));
  overflow: hidden;
}
/* As abas dividem a largura do cartão: a que não couber é encurtada com reticências, sem rolagem lateral */
.card-tab {
  display: inline-flex; flex: 0 1 auto; align-items: center; gap: var(--tb-space-1); min-width: 4.5rem;
  margin-bottom: -1px; padding: var(--tb-space-2) var(--tb-space-3);
  border: 0; border-bottom: 3px solid transparent; background: none;
  color: var(--tb-color-text-muted); font: 500 0.875rem/1.3 var(--tb-font-ui); white-space: nowrap; cursor: pointer;
}
.card-tab-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.card-tab:hover { color: var(--tb-color-text); }
.card-tab[aria-selected="true"] { border-bottom-color: var(--dimension-color); color: var(--dimension-text-color, var(--dimension-color)); font-weight: 700; }
.tab-count {
  flex: none; min-width: 1.25rem; padding: 0 var(--tb-space-1); border-radius: var(--tb-radius-pill);
  background: var(--dimension-color); color: var(--tb-color-on-brand); font: 700 0.75rem/1.25rem var(--tb-font-ui); text-align: center;
}
.tab-panel { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; gap: var(--tb-space-2); }
.tab-panel[hidden] { display: none; }
.card-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tb-space-2); color: var(--tb-color-text-muted); font: var(--tb-text-small); }
.card-toolbar[hidden] { display: none; }
.view-switch { display: inline-flex; overflow: hidden; border: 1px solid var(--tb-color-border-control); border-radius: var(--tb-radius-pill); }
.view-switch button {
  padding: var(--tb-space-1) var(--tb-space-3); border: 0; background: var(--tb-color-surface);
  color: var(--tb-color-text); font: var(--tb-text-small); cursor: pointer;
}
.view-switch button + button { border-left: 1px solid var(--tb-color-border-control); }
.view-switch button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--dimension-color) 14%, var(--tb-color-surface));
  /* O texto escurece sobre o tom da marca: a cor da dimensão pura não alcança 4,5:1 sobre ele */
  color: color-mix(in srgb, var(--dimension-text-color, var(--dimension-color)), black 35%); font-weight: 700;
}
.chart-note { margin: 0; color: var(--tb-color-text-muted); font: var(--tb-text-caption); }
.chart-note[hidden] { display: none; }
/* Busca aberta num cartão estreito: o gráfico em cima e a lista embaixo, com a lista rolando por dentro do cartão */
@container graph-card (max-width: 559.98px) {
  .graph-card.is-search-open .graph-content { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, .85fr) minmax(0, 1.15fr); }
}
/* Cartão composto com a busca aberta: as abas ficam no alto, e o gráfico e a lista dividem o painel da aba */
.tab-chart { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; gap: var(--tb-space-2); }
.graph-card.has-tabs.is-search-open .graph-content { display: flex; }
.graph-card.has-tabs.is-search-open .tab-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: var(--tb-space-2) var(--tb-space-4);
}
.graph-card.has-tabs.is-search-open .card-toolbar { grid-column: 1 / -1; grid-row: 1; }
.graph-card.has-tabs.is-search-open .tab-chart { grid-column: 1; grid-row: 2; }
.graph-card.has-tabs.is-search-open .value-search { grid-column: 2; grid-row: 2; min-height: 0; }
@container graph-card (max-width: 559.98px) {
  .graph-card.has-tabs.is-search-open .tab-panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, .85fr) minmax(0, 1.15fr); }
  .graph-card.has-tabs.is-search-open .value-search { grid-column: 1; grid-row: 3; }
}

/* Legenda da rosca (botões) */
.chart-legend { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.legend-item {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: var(--tb-space-2);
  width: 100%; min-height: var(--tb-target-min); padding: 4px 6px;
  border: 1px solid transparent; border-radius: var(--tb-radius-sm);
  background: transparent; text-align: left; cursor: pointer; font: var(--tb-text-small);
}
.legend-item:hover { background: var(--tb-color-surface-hover); }
.legend-item[aria-pressed="true"] { border-color: var(--dimension-color); background: var(--tb-color-selected-bg); font-weight: 500; }
.legend-item.is-muted .legend-swatch { background: var(--tb-data-muted); }
.legend-item[aria-disabled="true"] { color: var(--tb-color-text-disabled); cursor: not-allowed; }
.legend-item[aria-disabled="true"] .legend-swatch { background: var(--tb-color-surface); border: 1px dashed var(--tb-color-text-disabled); }
.legend-swatch { width: 10px; height: 10px; border-radius: 2px; background: var(--item-color, var(--dimension-color)); }
.legend-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend-value { color: var(--tb-color-text-muted); font: var(--tb-text-caption); font-variant-numeric: tabular-nums; }

/* Tooltip de dados */
.chart-tooltip {
  position: fixed; z-index: var(--tb-z-tooltip);
  width: max-content; min-width: 220px; max-width: min(300px, calc(100vw - 16px));
  overflow: hidden;
  border: 1px solid var(--tb-color-border); border-radius: var(--tb-radius-lg);
  background: var(--tb-color-surface); box-shadow: var(--tb-elevation-2);
  pointer-events: none;
}
.chart-tooltip[hidden] { display: none; }
/* Cabeçalho na cor da dimensão (ou primária) escurecida: tooltip e diálogos */
.chart-tooltip,
.tb-dialog { --header-color: color-mix(in srgb, var(--tooltip-color, var(--dimension-color, var(--tb-color-brand))), black 20%); }
.chart-tooltip-header,
.dialog-heading {
  background: var(--header-color);
  color: var(--tb-color-on-brand);
}
.chart-tooltip-header { display: grid; gap: 2px; padding: var(--tb-space-2) var(--tb-space-3); }
.chart-tooltip-dimension, .dialog-eyebrow { font: italic 400 0.75rem/1.3 var(--tb-font-ui); opacity: .92; }
.chart-tooltip-title { font: 700 0.875rem/1.3 var(--tb-font-ui); overflow-wrap: anywhere; }
.chart-tooltip-table { width: 100%; border-collapse: collapse; font: var(--tb-text-caption); }
.chart-tooltip-table tr:nth-child(odd), .info-term:nth-child(odd) { background: var(--tb-color-row-a); }
.chart-tooltip-table tr:nth-child(even), .info-term:nth-child(even) { background: var(--tb-color-row-b); }
.chart-tooltip-table th, .chart-tooltip-table td { padding: 5px var(--tb-space-3); }
.chart-tooltip-table th { color: var(--tb-color-text-secondary); font-weight: 400; text-align: left; }
.chart-tooltip-table td { color: var(--tb-color-text); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
/* Tabelas de contexto nos diálogos, no celular: rótulo sobre o valor, para listas longas de filtros */
@media (max-width: 479.98px) {
  .tb-dialog .chart-tooltip-table tr { display: grid; }
  .tb-dialog .chart-tooltip-table th { padding-bottom: 0; }
  .tb-dialog .chart-tooltip-table td { padding-top: 2px; text-align: left; }
}

/* ================================================================
   BUSCA DE VALORES (lista) E BUSCA HIERÁRQUICA (árvore)
   ================================================================ */
/* Painel de busca: cartão com cabeçalho e corpo, como os demais */
.value-search {
  display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%;
  --card-border-color: var(--tb-color-border);
  overflow: hidden;
  border: 1px solid var(--card-border-color); border-radius: var(--tb-radius-lg);
  background: var(--tb-color-surface);
  transition: border-color var(--tb-duration) var(--tb-easing);
}
.value-search[hidden] { display: none; }
.value-search-heading {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--tb-space-3);
  padding: var(--tb-space-3);
  border-bottom: 1px solid var(--card-border-color);
  transition: border-color var(--tb-duration) var(--tb-easing);
}
.value-search-body {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
  padding: var(--tb-space-3);
  background: var(--tb-color-surface-sunken);
}
.value-search-heading h4 { font: 500 0.9375rem/1.3 var(--tb-font-ui); }
.value-search-heading p { margin-top: 2px; color: var(--tb-color-text-muted); font: var(--tb-text-caption); }
.result-count { margin: 6px 2px; color: var(--tb-color-text-muted); font: var(--tb-text-caption); }
.value-list { flex: 1; min-height: 0; margin: 0; padding: 2px 4px 2px 0; list-style: none; overflow: hidden auto; overscroll-behavior: contain; }
.value-option {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--tb-space-2);
  width: 100%; min-height: var(--tb-target-touch); margin-bottom: 2px; padding: 6px var(--tb-space-2);
  border: 1px solid transparent; border-bottom-color: var(--tb-color-border-subtle); border-radius: var(--tb-radius-sm);
  background: transparent; text-align: left; cursor: pointer; font: var(--tb-text-body);
}
.value-option:hover, .value-option.is-hovered { border-color: var(--tb-color-border); background: var(--tb-color-surface-hover); }
.value-option[aria-pressed="true"] { border-color: var(--dimension-color); background: var(--tb-color-selected-bg); font-weight: 500; }
.value-label { overflow-wrap: anywhere; }
.value-meta { color: var(--tb-color-text-muted); font: var(--tb-text-caption); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Valor sem área no recorte das outras dimensões: indisponível, com o motivo abaixo do rótulo */
.value-option[aria-disabled="true"], .tree-select[aria-disabled="true"] { color: var(--tb-color-text-disabled); cursor: not-allowed; }
.value-option[aria-disabled="true"]:hover { border-color: transparent; border-bottom-color: var(--tb-color-border-subtle); background: transparent; }
.tree-select[aria-disabled="true"]:hover { border-color: transparent; background: transparent; }
.value-reason { display: block; color: var(--tb-color-text-muted); font: var(--tb-text-caption); font-weight: 400; white-space: normal; }
.search-match { padding: 0 1px; border-radius: 2px; background: var(--tb-color-search-match); color: inherit; }
.load-more { align-self: center; margin-top: var(--tb-space-2); }

.tree, .tree-children { margin: 0; padding: 0; list-style: none; }
.tree { flex: 1; min-height: 0; padding-right: 4px; overflow: hidden auto; overscroll-behavior: contain; }
.tree-children { margin-left: 14px; padding-left: 6px; border-left: 1px solid var(--tb-color-border); }
.tree-children[hidden] { display: none; }
.tree-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 4px; min-height: 36px; }
.tree-disclosure { width: 24px; height: 28px; }
.tree-disclosure .tb-icon { transition: transform var(--tb-duration) var(--tb-easing); }
.tree-disclosure[aria-expanded="true"] .tb-icon { transform: rotate(90deg); }
.tree-select {
  display: flex; align-items: center; justify-content: space-between; gap: var(--tb-space-2);
  width: 100%; min-width: 0; min-height: 36px; padding: 4px var(--tb-space-2);
  border: 1px solid transparent; border-radius: var(--tb-radius-sm);
  background: transparent; text-align: left; cursor: pointer; font: var(--tb-text-body);
}
.tree-select:hover, .tree-select.is-hovered { border-color: var(--tb-color-border); background: var(--tb-color-surface-hover); }
.tree-select[aria-pressed="true"] { border-color: var(--tb-color-selected-border); background: var(--tb-color-selected-bg); font-weight: 500; }
.tree-item[data-level="1"] > .tree-row .tree-select { font-weight: 500; }
.tree-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selection-summary { margin-top: var(--tb-space-2); padding-top: var(--tb-space-2); border-top: 1px solid var(--tb-color-border-subtle); max-height: 112px; overflow: auto; }
.selection-summary-title { color: var(--tb-color-text-secondary); font: var(--tb-text-label); margin-bottom: 4px; }
.selected-entry { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; padding: 2px 0; font: var(--tb-text-caption); }

/* ================================================================
   DIÁLOGO
   ================================================================ */
.tb-dialog {
  --card-border-color: var(--tb-color-border);
  width: min(480px, calc(100% - 32px)); padding: 0;
  border: 1px solid var(--card-border-color); border-radius: var(--tb-radius-xl);
  transition: border-color var(--tb-duration) var(--tb-easing);
  background: var(--tb-color-surface); color: var(--tb-color-text);
  box-shadow: var(--tb-elevation-3);
  overflow: hidden;
}
.tb-dialog-lg { width: min(720px, calc(100% - 32px)); }
.tb-dialog form { display: flex; flex-direction: column; max-height: min(80vh, 720px); }
.dialog-body { flex: 1; min-height: 0; overflow: auto; }
.tb-dialog::backdrop { background: rgb(24 39 31 / 46%); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--tb-space-3); padding: var(--tb-space-3) var(--tb-space-3) var(--tb-space-3) var(--tb-space-5); border-bottom: 1px solid var(--card-border-color); transition: border-color var(--tb-duration) var(--tb-easing); }
.dialog-title { display: grid; gap: 2px; min-width: 0; }
.dialog-heading h2 { font: 700 1.125rem/1.3 var(--tb-font-display); }
.dialog-heading .icon-button { width: var(--tb-target-touch); height: var(--tb-target-touch); border-radius: var(--tb-radius-pill); color: inherit; }
.dialog-heading .icon-button .tb-icon { font-size: var(--tb-space-6); }
.dialog-body { padding: var(--tb-space-4) var(--tb-space-5); color: var(--tb-color-text-secondary); }
.dialog-body > * + * { margin-top: var(--tb-space-3); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--tb-space-2); padding: var(--tb-space-3) var(--tb-space-5) var(--tb-space-5); }

/* ================================================================
   CONTEÚDO INFORMATIVO DE DIÁLOGOS (Sobre estas informações)
   ================================================================ */
.info-intro { display: flex; flex-direction: column; gap: var(--tb-space-3); }
.info-lead { color: var(--tb-color-text); font: var(--tb-text-body); }
.info-aspects { display: flex; flex-direction: column; gap: var(--tb-space-2); margin: 0; padding: 0; list-style: none; counter-reset: info-aspect; }
.info-aspects li { display: flex; align-items: flex-start; gap: var(--tb-space-2); counter-increment: info-aspect; color: var(--tb-color-text); font: var(--tb-text-body-strong); }
.info-aspects li::before { content: counter(info-aspect); }
.info-aspects small { color: var(--tb-color-text-muted); font: var(--tb-text-caption); }
.info-notes { display: flex; flex-direction: column; gap: var(--tb-space-1); margin: 0; padding: 0; list-style: none; }
.info-notes li { color: var(--tb-color-text-muted); font: var(--tb-text-caption); }
.info-section {
  --card-border-color: var(--tb-color-border);
  overflow: hidden;
  border: 1px solid var(--card-border-color);
  transition: border-color var(--tb-duration) var(--tb-easing);
  border-radius: var(--tb-radius-lg);
  background: var(--tb-color-surface);
}
.info-section-heading {
  display: flex; align-items: center; gap: var(--tb-space-3);
  padding: var(--tb-space-3) var(--tb-space-4);
  border-bottom: 1px solid var(--card-border-color);
  background: var(--tb-color-brand-subtle);
  transition: border-color var(--tb-duration) var(--tb-easing);
}
.info-section-heading h3 { display: flex; align-items: center; gap: var(--tb-space-2); margin: 0; color: var(--tb-color-text); font: var(--tb-text-card-title); }
.info-number,
.info-aspects li::before {
  display: inline-grid; place-items: center; flex: none;
  width: var(--tb-space-6); height: var(--tb-space-6);
  border-radius: var(--tb-radius-pill);
  background: var(--tb-color-brand); color: var(--tb-color-on-brand);
  font: var(--tb-text-label);
}
.info-section[data-tone="warning"] { --dimension-color: var(--tb-color-warning); }
.info-section[data-tone="warning"] .info-section-heading { background: var(--tb-color-warning-bg); }
.info-section[data-tone="warning"] .info-number { background: var(--tb-color-warning); }
.info-section-body { display: flex; flex-direction: column; gap: var(--tb-space-3); padding: var(--tb-space-3) var(--tb-space-4); }
.info-section-body > p { margin: 0; color: var(--tb-color-text-secondary); font: var(--tb-text-small); }
.info-terms { margin: 0 calc(var(--tb-space-4) * -1); }
.info-terms:first-child { margin-top: calc(var(--tb-space-3) * -1); }
.info-terms:last-child { margin-bottom: calc(var(--tb-space-3) * -1); }
.info-term { display: grid; grid-template-columns: var(--tb-space-10) minmax(0, 1fr); gap: var(--tb-space-1) var(--tb-space-2); padding: var(--tb-space-3) var(--tb-space-4); }
.info-term dt { display: contents; }
.info-term-code { color: var(--tb-color-text-muted); font: var(--tb-text-label); font-variant-numeric: tabular-nums; }
.info-term-name { color: var(--tb-color-text); font: var(--tb-text-body-strong); }
.info-term dd { grid-column: 2; margin: 0; color: var(--tb-color-text-secondary); font: var(--tb-text-small); }
.info-term dd + dd { margin-top: var(--tb-space-1); }
.dialog-body a { color: var(--tb-color-link); text-underline-offset: var(--tb-space-1); }
.dialog-body a .tb-icon { font-size: 1em; vertical-align: -0.125em; }

/* ================================================================
   ESTADOS DE DADOS
   ================================================================ */
.data-state {
  display: grid; place-items: center; align-content: center; gap: var(--tb-space-2);
  flex: 1; min-height: 0; padding: var(--tb-space-3);
  color: var(--tb-color-text-muted); text-align: center; font: var(--tb-text-small);
}
.data-state .tb-icon { font-size: 28px; }
.data-state[data-state="error"] { color: var(--tb-color-danger); }
.data-state[data-state="error"] .button { margin-top: var(--tb-space-1); }
.loading-indicator { display: block; width: 56px; height: 56px; mix-blend-mode: multiply; }
.loading-overlay .loading-indicator { width: 96px; height: 96px; }
/* Camada de carregamento: cobre só o conteúdo (resumo e gráficos), abaixo da barra e do menu */
.dashboard-content { position: relative; }
.loading-overlay {
  position: absolute; inset: 0; z-index: var(--tb-z-content-overlay);
  background: rgb(243 245 244 / 92%); color: var(--tb-color-text-secondary); font: var(--tb-text-body);
}
.loading-overlay[hidden] { display: none; }
/* A mensagem acompanha a rolagem: ocupa a área visível abaixo da barra superior e fica no centro dela */
.loading-overlay-message {
  position: sticky; top: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--tb-space-3);
  height: min(100%, calc(100dvh - var(--tb-navbar-height)));
  padding-inline: var(--tb-space-3); text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .loading-indicator { visibility: hidden; }
}
.inline-alert {
  display: flex; align-items: flex-start; gap: var(--tb-space-2);
  padding: var(--tb-space-2) var(--tb-space-3);
  border: 1px solid currentColor; border-radius: var(--tb-radius-md);
  font: var(--tb-text-small);
}
.inline-alert[data-tone="error"] { color: var(--tb-color-danger); background: var(--tb-color-danger-bg); }
.inline-alert[data-tone="warning"] { color: var(--tb-color-warning); background: var(--tb-color-warning-bg); }
.inline-alert p { color: var(--tb-color-text); }

.source-note {
  margin-top: var(--tb-space-5); padding-top: var(--tb-space-3);
  border-top: 1px solid var(--tb-color-border);
  color: var(--tb-color-text-muted); font: var(--tb-text-caption);
}

/* Download em CSV (diálogo “Baixar dados”): botão e nome do arquivo na mesma linha, quebrando no celular */
.download-action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tb-space-2) var(--tb-space-3); }
.download-note { color: var(--tb-color-text-muted); font: var(--tb-text-caption); overflow-wrap: anywhere; }
.download-status { min-height: 1.4em; color: var(--tb-color-text-secondary); font: var(--tb-text-small); }
.download-status[data-tone="error"] { color: var(--tb-color-danger); }
.dialog-body .download-status:empty { display: none; }

/* ================================================================
   RESPONSIVO DOS COMPONENTES
   ================================================================ */
@media (max-width: 767.98px) {
  /* Margem lateral menor no celular, para o conteúdo e o cabeçalho */
  :root { --tb-content-gutter: var(--tb-space-3); }
  .summary-card { padding: var(--tb-space-2) var(--tb-space-3); }
  .dashboard-section-heading { flex-direction: column; align-items: flex-start; gap: var(--tb-space-1); }
  .graph-card { height: 480px; }
  .graph-card-wide { height: 500px; }
  /* Busca aberta empilhada sob o gráfico: o cartão cresce para a lista mostrar vários valores */
  .graph-card.is-search-open { height: 760px; }
  .graph-card-wide.is-search-open { height: 880px; }
  .graph-card.is-search-open .graph-content,
  .graph-card-wide.is-search-open .graph-content { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, .85fr) minmax(0, 1.15fr); }
}

/* ================================================================
   VISUALIZADOR DE MAPA (DES-06): componentes compartilhados pelo visualizador e pelo guia (seção 6)
   Painel de camadas, legenda, popup, controles, mapa de fundo e marcas de seleção. A estrutura da página
   do visualizador fica em viewer.css; o exemplo do guia, em guide.css. Valores: tokens --tb-map-* de tokens.css.
   ================================================================ */
.map-selection-line, .map-selection-fill, .map-selection-pulse { stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.map-selection-line { fill: none; stroke: var(--c); stroke-width: var(--tb-map-select-width); }
.map-selection-fill { fill: var(--c); fill-opacity: var(--tb-map-select-veil); stroke: none; }
/* Sonar: o radar dos gráficos (tb-radar), com anel e véu que se expandem e somem a cada ciclo */
.map-selection-pulse { fill: var(--c); fill-opacity: 0; stroke: var(--c); stroke-width: 1px; opacity: 0; animation: map-sonar var(--tb-map-sonar-cycle) var(--tb-easing) infinite; }
@keyframes map-sonar {
  0% { opacity: 0; stroke-width: 1px; fill-opacity: 0; }
  15% { opacity: 1; stroke-width: 3px; fill-opacity: var(--tb-map-sonar-veil); }
  100% { opacity: 0; stroke-width: var(--tb-map-sonar-width); fill-opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .map-selection-pulse { display: none; } }
.map-zoom-flash { fill: none; stroke: var(--tb-color-brand); stroke-width: 3; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; pointer-events: none; animation: map-flash 1.2s var(--tb-easing) 2; }
@keyframes map-flash { 50% { opacity: .2; } }
.map-pin {
  position: absolute; z-index: 2; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 3px solid var(--tb-color-brand-strong); border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #fff, var(--tb-elevation-2);
  pointer-events: none;
}
.map-pin[hidden] { display: none; }
/* Mira no centro: aparece com o foco do teclado; Enter consulta o ponto sob ela */
.map-crosshair { position: absolute; z-index: 2; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; display: none; pointer-events: none; }
.map-crosshair::before, .map-crosshair::after { content: ""; position: absolute; background: var(--tb-data-outline); box-shadow: 0 0 0 1px #fff; }
.map-crosshair::before { left: 13px; top: 0; width: 2px; height: 28px; }
.map-crosshair::after { top: 13px; left: 0; height: 2px; width: 28px; }
.map-stage:focus-visible .map-crosshair { display: block; }

/* Controles do mapa (Leaflet): coluna à esquerda, botão de mapa base à direita */
.map-controls { position: absolute; z-index: 3; top: var(--tb-map-edge); left: var(--tb-map-edge); display: grid; gap: 10px; justify-items: start; }
.map-control-group { display: grid; border: 2px solid rgb(0 0 0 / 20%); border-radius: var(--tb-radius-md); background: #fff; background-clip: padding-box; overflow: hidden; }
.map-control {
  display: grid; place-items: center; width: var(--tb-map-control-size); height: var(--tb-map-control-size);
  padding: 0; border: 0; background: #fff; color: #222; cursor: pointer;
}
.map-control + .map-control { border-top: 1px solid #ccc; }
.map-control:hover { background: #f4f4f4; }
.map-control .tb-icon { font-size: 20px; }
.map-control:focus-visible { outline-offset: -3px; }
.map-basemap { position: absolute; z-index: 3; top: var(--tb-map-edge); right: var(--tb-map-edge); width: 44px; height: 44px; border: 0; border-radius: var(--tb-radius-md); background: var(--tb-ref-teal-800); color: #fff; box-shadow: var(--tb-elevation-2); cursor: pointer; display: grid; place-items: center; }
.map-basemap .tb-icon { font-size: 28px; }
.map-basemap:hover { background: var(--tb-ref-teal-900); }
@container mapframe (max-width: 599.98px) {
  .map-control { width: 40px; height: 40px; }
  .map-controls { gap: 8px; }
}

/* Barra de rolagem fina, nas cores da identidade: trilho neutro e marcador teal; vale também para o quadro e as folhas do guia */
@supports (-moz-appearance: none) {
  :is(.map-frame, .map-sheet-panel, .map-popup) * { scrollbar-width: thin; scrollbar-color: var(--tb-ref-teal-600) var(--tb-ref-neutral-100); }
}
:is(.map-frame, .map-sheet-panel, .map-popup) ::-webkit-scrollbar { width: 6px; height: 6px; }
:is(.map-frame, .map-sheet-panel, .map-popup) ::-webkit-scrollbar-track { background: var(--tb-ref-neutral-100); border-radius: var(--tb-radius-pill); }
:is(.map-frame, .map-sheet-panel, .map-popup) ::-webkit-scrollbar-thumb { background: var(--tb-ref-teal-600); border-radius: var(--tb-radius-pill); }
:is(.map-frame, .map-sheet-panel, .map-popup) ::-webkit-scrollbar-thumb:hover { background: var(--tb-ref-teal-800); }
:is(.map-frame, .map-sheet-panel, .map-popup) ::-webkit-scrollbar-button { display: none; }
:is(.map-frame, .map-sheet-panel, .map-popup) ::-webkit-scrollbar-corner { background: transparent; }

/* Barra de rolagem fina, nas cores da identidade: trilho neutro e marcador teal */
@supports (-moz-appearance: none) {
  :is(.map-layers-slot, .map-actions) * { scrollbar-width: thin; scrollbar-color: var(--tb-ref-teal-600) var(--tb-ref-neutral-100); }
}
.map-layers-slot::-webkit-scrollbar { width: 6px; height: 6px; }
.map-layers-slot::-webkit-scrollbar-track { background: var(--tb-ref-neutral-100); border-radius: var(--tb-radius-pill); }
.map-layers-slot::-webkit-scrollbar-thumb { background: var(--tb-ref-teal-600); border-radius: var(--tb-radius-pill); }
.map-layers-slot::-webkit-scrollbar-thumb:hover { background: var(--tb-ref-teal-800); }

.map-layers { display: grid; flex: none; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--tb-space-2); padding: 0 var(--tb-space-3) var(--tb-space-2); }
.map-layers > .map-group:first-child { margin-top: var(--tb-space-2); }
/* “Expandir tudo” e “Recolher tudo”: botões só com ícone, dentro da faixa de seção “Camadas” */
.sidebar-section-title .sidebar-section-actions { display: flex; align-items: center; gap: var(--tb-space-1); margin-right: calc(-1 * var(--tb-space-1)); }
.sidebar-section-actions .icon-button { width: 32px; height: 32px; color: inherit; }
.sidebar-section-actions .icon-button:hover:not([aria-disabled="true"]) { background: rgb(0 0 0 / 8%); }
.sidebar-section-actions .icon-button[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.sidebar-section-actions .icon-button:focus-visible { outline-color: #fff; }

/* Grupo: no hover, a borda assume a cor do cabeçalho escurecida, a mesma regra dos diálogos. Fora de uma seção do painel (exemplos do guia), a cor vem da própria faixa */
.map-group {
  --card-border-color: var(--tb-color-border); --header-color: var(--sidebar-hover-color, color-mix(in srgb, var(--tb-map-band), black 20%));
  border: 1px solid var(--card-border-color); border-radius: var(--tb-radius-lg); background: var(--tb-color-surface); overflow: clip;
  transition: border-color var(--tb-duration) var(--tb-easing);
}
.map-group:hover { --card-border-color: var(--header-color); }
.map-group[data-depth="1"] { margin: var(--tb-space-2); }
/* Cabeçalho: cor da faixa de seção e texto branco; fica fixo no alto da rolagem, o do subgrupo logo abaixo do do grupo */
.map-group-header {
  position: sticky; top: 0; z-index: var(--tb-z-sticky-card-header);
  display: flex; align-items: center; gap: var(--tb-space-2); height: var(--tb-map-group-header-height); padding: 0 var(--tb-space-3);
  background: var(--tb-map-band); color: var(--tb-sidebar-section-text); cursor: pointer;
  /* A linha de baixo só existe com o grupo aberto: branca em repouso e, no hover do grupo, na cor da borda dele; recolhido, o cabeçalho não tem borda */
  border-bottom: 1px solid transparent;
  transition: background-color var(--tb-duration) var(--tb-easing), border-color var(--tb-duration) var(--tb-easing);
  /* 1 px de cor acima: com a posição fracionada, não sobra fresta por onde o conteúdo apareça */
  box-shadow: 0 -1px 0 var(--tb-map-band);
}
.map-group[data-open="true"] > .map-group-header { border-bottom-color: #fff; }
.map-group[data-open="true"]:hover > .map-group-header { border-bottom-color: var(--card-border-color); }
/* O hover vale para o cabeçalho inteiro, não só para o botão do nome */
.map-group-header:hover { background: var(--tb-map-band-hover); }
/* Cabeçalhos fixos empilhados: o do subgrupo fica logo abaixo do do grupo e por baixo dele (z-index menor) */
.map-group[data-depth="1"] > .map-group-header { top: var(--tb-map-group-header-height); z-index: calc(var(--tb-z-sticky-card-header) - 1); }
.map-group-toggle {
  display: flex; align-items: center; gap: var(--tb-space-2); flex: 1; min-width: 0; height: 100%;
  padding: 0; border: 0; background: transparent; color: inherit;
  font: var(--tb-text-panel-title); text-align: left; cursor: pointer;
}
.map-group-toggle:focus-visible { outline-color: #fff; outline-offset: -3px; }
.map-group-toggle .tb-icon { color: inherit; }
.map-group-toggle .map-folder { font-size: 20px; }
.map-group-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-group-count { flex: none; font: var(--tb-text-label); font-variant-numeric: tabular-nums; }
.map-group-toggle .toggle-icon { transition: transform var(--tb-duration) var(--tb-easing); }
.map-group-toggle[aria-expanded="true"] .toggle-icon { transform: rotate(180deg); }

/* Bandeja: abre e fecha como o cartão de gráfico */
.map-tray { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr; transition: grid-template-rows var(--tb-duration) var(--tb-easing), opacity var(--tb-duration) var(--tb-easing), visibility 0s; }
.map-group[data-open="false"] > .map-tray { grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows var(--tb-duration) var(--tb-easing), opacity var(--tb-duration) var(--tb-easing), visibility 0s var(--tb-duration); }
.map-tray-inner { min-height: 0; overflow: clip; }

/* Interruptor: input nativo. Desligado (bolinha à esquerda), parcialmente ligado (bolinha à direita, só contorno) e ligado (preenchido) */
.map-switch { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; cursor: pointer; }
.map-switch input {
  appearance: none; position: relative; margin: 0; width: 24px; height: 14px;
  border: 2px solid var(--tb-ref-neutral-600); border-radius: var(--tb-radius-pill); background: var(--tb-color-surface);
  cursor: pointer; transition: background-color var(--tb-duration) var(--tb-easing), border-color var(--tb-duration) var(--tb-easing);
}
.map-switch input::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--tb-ref-neutral-600); transition: transform var(--tb-duration) var(--tb-easing), background-color var(--tb-duration) var(--tb-easing);
}
.map-switch input:checked { border-color: var(--tb-color-brand); background: var(--tb-color-brand); }
.map-switch input:checked::before { transform: translateX(10px); background: #fff; }
.map-switch input:indeterminate { border-color: var(--tb-color-brand); background: var(--tb-color-surface); }
.map-switch input:indeterminate::before { transform: translateX(10px); background: var(--tb-color-brand); }
.map-switch input:disabled { border-color: var(--tb-color-text-disabled); background: var(--tb-color-field); cursor: not-allowed; }
.map-switch input:disabled::before { background: var(--tb-color-text-disabled); }
.map-switch input:focus-visible { outline: var(--tb-focus-outline); outline-offset: var(--tb-focus-offset); }
.map-switch:has(input:disabled) { cursor: not-allowed; }
/* Sobre a faixa de seção (interruptor do grupo): trilho sempre branco; ligado ganha contorno e bolinha mais fortes */
.map-group-header .map-switch input { border-color: #fff; background: #fff; }
.map-group-header .map-switch input::before { background: var(--tb-color-brand); }
.map-group-header .map-switch input:indeterminate { background: #fff; border-color: #fff; }
.map-group-header .map-switch input:checked { background: #fff; border-color: var(--tb-ref-teal-800); }
.map-group-header .map-switch input:checked::before { background: var(--tb-ref-teal-900); }
.map-group-header .map-switch input:focus-visible { outline-color: #fff; }

/* Item de camada: o item inteiro liga e desliga a camada; o botão de ações e as opções de versão têm clique próprio */
.map-layer-list { margin: 0; padding: 0; list-style: none; }
.map-layer {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--tb-space-2);
  padding: var(--tb-space-1) var(--tb-space-3); background: var(--tb-color-surface); cursor: pointer;
  transition: background-color var(--tb-duration) var(--tb-easing);
}
.map-layer:hover, .map-layer:focus-within, .map-layer[data-menu="open"] { background: var(--tb-color-surface-hover); }
.map-layer[data-state="error"] { background: var(--tb-color-danger-bg); }
.map-layer[data-state="unavailable"] { cursor: default; }
.map-layer[data-state="unavailable"] .map-layer-name { color: var(--tb-color-text-secondary); cursor: default; }
.map-layer-text { display: grid; gap: 1px; min-width: 0; }
/* Título em até duas linhas, com reticências; o nome inteiro está no title */
.map-layer-name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  color: var(--tb-color-text); font: var(--tb-text-layer-name); overflow-wrap: anywhere; cursor: pointer;
}
/* Fonte e ano em uma linha só: a fonte recebe reticências e o ano nunca é cortado */
.map-layer-meta { display: flex; align-items: baseline; gap: var(--tb-space-2); min-width: 0; color: var(--tb-color-text-muted); font: var(--tb-text-caption); white-space: nowrap; }
.map-layer-source { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.map-layer-year { flex: none; font-weight: 500; font-variant-numeric: tabular-nums; }
.map-layer-tag { display: inline-block; padding: 0 6px; border-radius: var(--tb-radius-pill); background: var(--tb-color-warning-bg); color: var(--tb-color-warning); font: 500 0.75rem/1.6 var(--tb-font-ui); white-space: nowrap; }
.map-layer-style { display: grid; place-items: center; width: 24px; height: 24px; }
.map-layer-menu { width: 24px; height: 24px; border-radius: var(--tb-radius-md); }
.map-layer-menu .tb-icon { font-size: 16px; }
.map-layer-menu[aria-expanded="true"] { background: var(--tb-color-surface-hover); color: var(--tb-color-text); }
.map-layer-extra { grid-column: 1 / -1; display: grid; gap: var(--tb-space-2); cursor: default; }
.map-layer-extra:empty { display: none; }
.map-layer-extra .field-label { display: block; margin-bottom: 4px; }
.map-version-slot { min-width: 0; margin: 0; padding: 0; border: 0; }
.map-version-slot[hidden] { display: none; }
/* Chips de versão: uma opção marcada de cada vez */
.map-chips { display: flex; flex-wrap: wrap; gap: var(--tb-space-2); }
.map-chip {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--tb-space-3); border: 1px solid var(--tb-color-border-control); border-radius: var(--tb-radius-pill);
  background: var(--tb-color-surface); color: var(--tb-color-text-secondary); font: 500 0.75rem/1 var(--tb-font-ui); cursor: pointer;
  transition: background-color var(--tb-duration) var(--tb-easing), border-color var(--tb-duration) var(--tb-easing);
}
.map-chip:hover { background: var(--tb-color-surface-hover); border-color: var(--tb-color-brand); }
.map-chip[aria-checked="true"] { border-color: var(--tb-color-brand); background: var(--tb-color-brand); color: var(--tb-color-on-brand); }
.map-chip:focus-visible { outline: var(--tb-focus-outline); outline-offset: var(--tb-focus-offset); }
.map-layer-note { margin: 0; color: var(--tb-color-text-secondary); font: var(--tb-text-caption); }
.map-layer-status { display: flex; align-items: flex-start; gap: var(--tb-space-2); margin: 0; color: var(--tb-color-text); font: var(--tb-text-caption); }
.map-layer-status .tb-icon { font-size: 16px; }
.map-layer-status[data-tone="error"] { color: var(--tb-color-danger); }
/* Aviso curto no alto do painel de camadas (por exemplo, camadas guardadas que não existem mais) */
.map-panel-note { margin: var(--tb-space-2) var(--tb-space-3) 0; padding: var(--tb-space-2); border-radius: var(--tb-radius-md); background: var(--tb-color-field); }
.map-layer-status .button-text { font-size: 0.75rem; }
.map-progress { position: relative; height: 3px; overflow: hidden; border-radius: 2px; background: var(--tb-color-selected-border); }
.map-progress::before { content: ""; position: absolute; inset: 0 auto 0 -40%; width: 40%; background: var(--tb-color-brand); animation: map-progress 1.1s var(--tb-easing) infinite; }
@keyframes map-progress { to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .map-progress::before { inset: 0; width: 100%; animation: none; opacity: 0.6; } }

/* Menu de ações: um só, ancorado no ponto do clique (ou do botão), fora da rolagem do painel lateral */
.map-actions {
  position: fixed; z-index: var(--tb-z-overlay); display: grid; gap: var(--tb-space-1); width: 232px; padding: var(--tb-space-2);
  border: 1px solid var(--tb-color-border); border-radius: var(--tb-radius-lg); background: var(--tb-color-surface); box-shadow: var(--tb-elevation-3);
}
.map-actions[hidden] { display: none; }
.map-actions-title { margin: 0; padding: 2px var(--tb-space-2) var(--tb-space-1); border-bottom: 1px solid var(--tb-color-border-subtle); color: var(--tb-color-text); font: var(--tb-text-layer-name); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-actions .button { justify-content: flex-start; width: 100%; }
.map-actions-opacity { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px var(--tb-space-2); padding: 0 var(--tb-space-2) var(--tb-space-1); }
.map-actions-opacity[hidden], .map-actions .button[hidden] { display: none; }
.map-actions-opacity output { color: var(--tb-color-text-secondary); font: var(--tb-text-label); font-variant-numeric: tabular-nums; }
.map-actions-opacity input { grid-column: 1 / -1; width: 100%; height: 28px; accent-color: var(--tb-color-brand); }

/* Ícone do estilo: miniatura do estilo real da camada (DES-07).
   Sobreposição: contorno de 1 px e preenchimento de 10% na cor do grupo, com o ícone da camada no centro; só o grupo dos territórios é tracejado (traço 6, vazio 3).
   Cômputo: preenchimento de 10% e contorno de 0,5 px, no tom dos níveis (neutro até as cores definitivas). Limites (DES-09): só contorno, sem preenchimento nem ícone, com a cor, a espessura e o traço de cada camada. */
.map-style-icon { --c: var(--tb-color-brand); position: relative; display: block; width: 20px; height: 20px; flex: none; }
.map-style-icon[data-family="projects"] { --c: var(--tb-map-group-projects); }
.map-style-icon[data-family="protected"] { --c: var(--tb-map-group-protected); }
.map-style-icon[data-family="territories"] { --c: var(--tb-map-group-territories); }
.map-style-icon[data-kind="overlay"] {
  --fill: color-mix(in srgb, var(--c) calc(var(--tb-map-fill-opacity) * 100%), #fff);
  display: grid; place-items: center; border: var(--tb-map-stroke-overlay) solid var(--c); border-radius: 0; background: var(--fill);
}
.map-style-icon img { display: block; width: 16px; height: 16px; }
/* Tracejado do grupo dos territórios: quatro lados de 1 px com traço de 6 px e vazio de 3 px */
.map-style-icon[data-kind="overlay"][data-family="territories"] {
  border: 0;
  background:
    repeating-linear-gradient(90deg, var(--c) 0 6px, transparent 6px 9px) top / 100% var(--tb-map-stroke-overlay) no-repeat,
    repeating-linear-gradient(90deg, var(--c) 0 6px, transparent 6px 9px) bottom / 100% var(--tb-map-stroke-overlay) no-repeat,
    repeating-linear-gradient(180deg, var(--c) 0 6px, transparent 6px 9px) left / var(--tb-map-stroke-overlay) 100% no-repeat,
    repeating-linear-gradient(180deg, var(--c) 0 6px, transparent 6px 9px) right / var(--tb-map-stroke-overlay) 100% no-repeat,
    var(--fill);
}
.map-style-icon[data-kind="missing"] { border: 2px dashed var(--tb-color-text-disabled); border-radius: 3px; }
.map-style-icon[data-kind="boundary"] {
  --w: 0.5px; --d: 8px; --g: 0px; border: 0; border-radius: 0;
  background:
    repeating-linear-gradient(90deg, var(--c) 0 var(--d), transparent var(--d) calc(var(--d) + var(--g))) top / 100% var(--w) no-repeat,
    repeating-linear-gradient(90deg, var(--c) 0 var(--d), transparent var(--d) calc(var(--d) + var(--g))) bottom / 100% var(--w) no-repeat,
    repeating-linear-gradient(180deg, var(--c) 0 var(--d), transparent var(--d) calc(var(--d) + var(--g))) left / var(--w) 100% no-repeat,
    repeating-linear-gradient(180deg, var(--c) 0 var(--d), transparent var(--d) calc(var(--d) + var(--g))) right / var(--w) 100% no-repeat;
}
.map-style-icon[data-layer-style="divisao_estadual"] { --c: var(--tb-map-limit-state); --w: var(--tb-map-limit-state-width); --d: var(--tb-map-limit-state-dash); --g: var(--tb-map-limit-state-gap); }
.map-style-icon[data-layer-style="divisao_municipal"] { --c: var(--tb-map-limit-municipality); --w: var(--tb-map-limit-municipality-width); --d: var(--tb-map-limit-municipality-dash); --g: var(--tb-map-limit-municipality-gap); }
.map-style-icon[data-layer-style="biomas"] { --c: var(--tb-map-limit-biome); --w: var(--tb-map-limit-biome-width); --d: var(--tb-map-limit-biome-dash); --g: var(--tb-map-limit-biome-gap); }
.map-style-icon[data-layer-style="hidro_regiao"] { --c: var(--tb-map-limit-hydro-region); --w: var(--tb-map-limit-hydro-region-width); --d: var(--tb-map-limit-hydro-region-dash); --g: var(--tb-map-limit-hydro-region-gap); }
.map-style-icon[data-layer-style="hidro_meso"] { --c: var(--tb-map-limit-hydro-meso); --w: var(--tb-map-limit-hydro-meso-width); --d: var(--tb-map-limit-hydro-meso-dash); --g: var(--tb-map-limit-hydro-meso-gap); }
.map-style-icon[data-layer-style="hidro_bacia"] { --c: var(--tb-map-limit-hydro-basin); --w: var(--tb-map-limit-hydro-basin-width); --d: var(--tb-map-limit-hydro-basin-dash); --g: var(--tb-map-limit-hydro-basin-gap); }
/* Cômputo: sete quadradinhos, como o desenho simplificado nas escalas menores; um, largo, para os projetos de recuperação (níveis 1 a 5) e um
   para cada nível de Governança, cada um na cor do nível, com o preenchimento e o contorno que o nível tem no mapa */
.map-style-icon[data-kind="classes"] { display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 1px; border: 0; border-radius: 0; background: none; }
.map-style-icon[data-kind="classes"] i { display: block; box-sizing: border-box; border: var(--tb-map-stroke-tier) solid var(--c); background: color-mix(in srgb, var(--c) calc(var(--tb-map-fill-opacity) * 100%), #fff); }
.map-style-icon[data-kind="classes"] i:nth-child(1) { --c: var(--tb-map-tier-projects); grid-column: 1 / -1; }
.map-style-icon[data-kind="classes"] i:nth-child(2) { --c: var(--tb-map-tier-06); }
.map-style-icon[data-kind="classes"] i:nth-child(3) { --c: var(--tb-map-tier-07); }
.map-style-icon[data-kind="classes"] i:nth-child(4) { --c: var(--tb-map-tier-08); }
.map-style-icon[data-kind="classes"] i:nth-child(5) { --c: var(--tb-map-tier-09); }
.map-style-icon[data-kind="classes"] i:nth-child(6) { --c: var(--tb-map-tier-10); }
.map-style-icon[data-kind="classes"] i:nth-child(7) { --c: var(--tb-map-tier-11); }

.map-popup {
  --header-color: var(--popup-header-bg, color-mix(in srgb, var(--tooltip-color, var(--tb-color-brand)), black 20%));
  --tail-x: 50%;
  position: absolute; z-index: 5; left: 0; top: 0;
  width: var(--tb-map-popup-width);
}
.map-popup[hidden] { display: none; }
.map-popup-card {
  display: flex; flex-direction: column; width: 100%;
  /* a altura cabe entre a faixa dos controles (64 px) e a escala (40 px), com a distância até o ponto (48 px) */
  max-height: calc(var(--tb-map-stage-height, 100%) - 64px - 40px - 48px);
  overflow: hidden; border: 1px solid var(--tb-color-border); border-radius: var(--tb-radius-lg);
  background: var(--tb-color-surface); box-shadow: var(--tb-elevation-2);
}
.map-popup-tail {
  position: absolute; left: var(--tail-x); bottom: -9px; width: 16px; height: 16px; margin-left: -8px;
  border: solid var(--tb-color-border); border-width: 0 1px 1px 0; background: var(--tb-color-surface); transform: rotate(45deg); box-shadow: 2px 2px 3px rgb(29 43 36 / 8%);
}
.map-popup-header { display: flex; align-items: flex-start; gap: var(--tb-space-2); flex: none; padding: var(--tb-space-2) var(--tb-space-2) var(--tb-space-2) var(--tb-space-3); background: var(--header-color); color: var(--popup-header-ink, var(--tb-color-on-brand)); }
.map-popup-title { flex: 1; min-width: 0; display: grid; gap: 2px; }
.map-popup-eyebrow { font: italic 400 0.75rem/1.3 var(--tb-font-ui); opacity: .92; }
.map-popup-title h3 { font: var(--tb-text-layer-name); overflow-wrap: anywhere; }
.map-popup-header .icon-button { color: inherit; margin-top: -2px; }
.map-popup-header .icon-button:hover { background: color-mix(in srgb, currentcolor 14%, transparent); color: inherit; }
.map-popup-header :focus-visible { outline-color: var(--popup-header-ink, #fff); }
.map-popup-tabs { display: flex; flex: none; gap: 0; overflow-x: auto; border-bottom: 1px solid var(--tb-color-border); background: var(--tb-color-surface-sunken); scrollbar-width: thin; }
.map-popup-tabs button {
  flex: none; max-width: 70%; min-height: 36px; padding: 0 var(--tb-space-3); border: 0; border-bottom: 2px solid transparent; background: transparent;
  color: var(--tb-color-text-secondary); font: 500 0.75rem/1.2 var(--tb-font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.map-popup-tabs button[aria-selected="true"] { border-bottom-color: var(--tb-color-brand); color: var(--tb-color-brand-strong); }
.map-popup-tabs button:hover { background: var(--tb-color-surface-hover); }
.map-popup-tabs button:focus-visible { outline-offset: -3px; }
.map-popup-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.map-popup-title h3, .map-popup-eyebrow { overflow: hidden; text-overflow: ellipsis; }
.map-popup-body .chart-tooltip-table td { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-popup-body .chart-tooltip-table th { width: 46%; }
.map-popup-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--tb-space-2); flex: none; padding: var(--tb-space-2) var(--tb-space-3); border-top: 1px solid var(--tb-color-border-subtle); color: var(--tb-color-text-muted); font: var(--tb-text-caption); }
.map-popup-foot .button-text { font-size: 0.75rem; white-space: nowrap; }
.map-popup-state { display: grid; place-items: center; gap: var(--tb-space-2); padding: var(--tb-space-5) var(--tb-space-4); color: var(--tb-color-text-muted); text-align: center; font: var(--tb-text-small); }
.map-popup-state .tb-icon { font-size: 28px; }
.map-popup-state[data-state="error"] { color: var(--tb-color-danger); }
.map-popup-state .loading-indicator { width: 40px; height: 40px; }
.map-popup-grab { display: none; }
/* Especímen estático: o popup entra no fluxo da página */
.map-popup[data-static] { position: relative; inset: auto; width: 100%; max-width: var(--tb-map-popup-width); margin-bottom: 10px; }
.map-popup[data-static] .map-popup-card { max-height: none; }

/* ================================================================
   LEGENDA DA HIERARQUIA (UI-13)
   ================================================================ */
:root {
  --tb-map-edge: var(--tb-space-3);     /* margem entre os painéis flutuantes e a borda do mapa */
  --tb-map-legend-width: 264px;
}
/* O mapa recorta o que sai dele: o painel inferior recolhido fica abaixo da borda e não pode aumentar a página */
.map-stage { container: mapframe / inline-size; overflow: hidden; }

/* Barra de rolagem fina, nas cores da identidade: trilho neutro e marcador teal */
@supports (-moz-appearance: none) {
  .map-legend * { scrollbar-width: thin; scrollbar-color: var(--tb-ref-teal-600) var(--tb-ref-neutral-100); }
}
.map-legend ::-webkit-scrollbar { width: 6px; height: 6px; }
.map-legend ::-webkit-scrollbar-track { background: var(--tb-ref-neutral-100); border-radius: var(--tb-radius-pill); }
.map-legend ::-webkit-scrollbar-thumb { background: var(--tb-ref-teal-600); border-radius: var(--tb-radius-pill); }
.map-legend ::-webkit-scrollbar-thumb:hover { background: var(--tb-ref-teal-800); }
.map-legend ::-webkit-scrollbar-button { display: none; }
.map-legend ::-webkit-scrollbar-corner { background: transparent; }

.map-legend {
  /* acima da camada de carregamento: a lista é fixa e não depende do mapa */
  position: absolute; z-index: calc(var(--tb-z-content-overlay) + 1); right: var(--tb-map-edge); bottom: calc(36px + var(--tb-map-edge) / 2);
  display: flex; flex-direction: column; width: var(--tb-map-legend-width);
  /* termina abaixo do botão de mapa de fundo (64 px) e acima da escala */
  max-height: calc(100% - 64px - 42px - var(--tb-map-edge));
  overflow: hidden; border: 1px solid var(--tb-color-border); border-radius: var(--tb-radius-lg);
  background: var(--tb-color-surface); box-shadow: var(--tb-elevation-2);
}
.map-legend[hidden] { display: none; }
/* Nos exemplos do guia, a legenda é um bloco comum (como o popup estático) */
.map-legend[data-static] { position: relative; inset: auto; width: 100%; max-width: var(--tb-map-legend-width); max-height: none; box-shadow: none; }
.map-legend-header { flex: none; background: var(--tb-color-surface-sunken); }
.map-legend-header h3 { margin: 0; font: var(--tb-text-body-strong); color: var(--tb-color-text); }
/* O cabeçalho inteiro é o botão que recolhe e abre */
.map-legend-toggle {
  display: flex; align-items: center; gap: var(--tb-space-1); width: 100%; min-height: 40px; padding: 0 var(--tb-space-2) 0 var(--tb-space-3);
  border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background-color var(--tb-duration) var(--tb-easing);
}
.map-legend-toggle:hover { background: color-mix(in srgb, var(--tb-color-brand) 10%, var(--tb-color-surface-sunken)); }
.map-legend-toggle:focus-visible { outline: var(--tb-focus-outline); outline-offset: -3px; }
.map-legend-toggle-label { flex: 1; min-width: 0; }
.map-legend[data-open="true"] > .map-legend-header { border-bottom: 1px solid var(--tb-color-border-subtle); }
.map-legend-toggle .toggle-icon { transition: transform var(--tb-duration) var(--tb-easing); }
.map-legend-toggle[aria-expanded="true"] .toggle-icon { transform: rotate(180deg); }
/* Abrir e recolher animam a altura, a opacidade e o respiro do corpo em --tb-duration (zero com movimento reduzido).
   --tb-map-legend-body-height é a altura do conteúdo, medida pelo JS; a altura máxima da legenda continua valendo. */
.map-legend-body {
  flex: 1; min-height: 0; overflow-y: auto; padding: var(--tb-space-2) var(--tb-space-2) var(--tb-space-3);
  max-height: var(--tb-map-legend-body-height, 640px); opacity: 1;
  transition: max-height var(--tb-duration) var(--tb-easing), opacity var(--tb-duration) var(--tb-easing),
    padding var(--tb-duration) var(--tb-easing), visibility 0s linear 0s;
}
/* Recolhido, o corpo sai do teclado e dos leitores de tela quando a animação termina */
.map-legend[data-open="false"] .map-legend-body {
  max-height: 0; padding-block: 0; overflow: hidden; opacity: 0; visibility: hidden;
  transition: max-height var(--tb-duration) var(--tb-easing), opacity var(--tb-duration) var(--tb-easing),
    padding var(--tb-duration) var(--tb-easing), visibility 0s linear var(--tb-duration);
}
.map-legend-hint { margin: 0 0 var(--tb-space-2); padding: 0 var(--tb-space-1); color: var(--tb-color-text-muted); font: var(--tb-text-caption); }
.map-legend-group + .map-legend-group { margin-top: var(--tb-space-2); }
.map-legend-group h4 { display: grid; padding: var(--tb-space-1); font: 700 0.75rem/1.25 var(--tb-font-ui); color: var(--tb-color-text); }
.map-legend-group h4 small { color: var(--tb-color-text-muted); font: var(--tb-text-caption); }
.map-legend-group ol { margin: 0; padding: 0; list-style: none; }
.map-tier {
  display: flex; align-items: center; gap: var(--tb-space-2); min-height: 28px; padding: 2px var(--tb-space-1);
  border-radius: var(--tb-radius-sm); font: var(--tb-text-small); color: var(--tb-color-text);
  transition: background-color var(--tb-duration) var(--tb-easing);
}
.map-tier-chip {
  display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 4px;
  background: var(--tier-color); color: var(--tier-ink);
  font: 500 0.75rem/1 var(--tb-font-ui); font-variant-numeric: tabular-nums;
}
/* A faixa de níveis do item de projetos (1–5) cabe no mesmo quadrado dos outros */
.map-tier-chip[data-range] { font-size: 0.6875rem; letter-spacing: -0.02em; }
.map-tier[aria-current="true"] { background: var(--tb-color-selected-bg); font-weight: 500; }
.map-tier[aria-current="true"] .map-tier-chip { outline: 2px solid var(--tb-data-outline); outline-offset: 1px; }
.map-tier[data-here="true"] { background: var(--tb-color-field); }
.map-tier-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-tier-here { flex: none; margin-left: auto; color: var(--tb-color-text-secondary); font: var(--tb-text-label); }

/* Atalho para reabrir a legenda quando está recolhida no celular */
.map-legend-chip {
  position: absolute; z-index: calc(var(--tb-z-content-overlay) + 1); right: var(--tb-map-edge); bottom: calc(36px + var(--tb-map-edge) / 2);
  display: none; align-items: center; gap: var(--tb-space-1); min-height: 44px; padding: 0 var(--tb-space-3) 0 var(--tb-space-2);
  border: 0; border-radius: var(--tb-radius-pill); background: var(--tb-color-surface); color: var(--tb-color-text);
  font: 500 0.8125rem/1 var(--tb-font-ui); box-shadow: var(--tb-elevation-2); cursor: pointer;
}
.map-legend-chip[hidden] { display: none !important; }

/* Celular: a legenda vira o painel inferior do mapa (o popup divide esse painel, um de cada vez) */
@container mapframe (max-width: 599.98px) {
  .map-legend {
    left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none;
    max-height: 52%; border-width: 1px 0 0; border-radius: var(--tb-radius-xl) var(--tb-radius-xl) 0 0; box-shadow: var(--tb-elevation-3);
  }
  /* O painel inferior desce e sobe; o corpo mantém a altura para não encolher durante o movimento */
  .map-legend { transform: translateY(0); transition: transform var(--tb-duration) var(--tb-easing), visibility 0s linear 0s; }
  .map-legend[data-open="false"] {
    transform: translateY(100%); visibility: hidden;
    transition: transform var(--tb-duration) var(--tb-easing), visibility 0s linear var(--tb-duration);
  }
  .map-legend[data-open="false"] .map-legend-body { max-height: var(--tb-map-legend-body-height, 640px); padding-block: var(--tb-space-2) var(--tb-space-3); opacity: 1; overflow-y: auto; visibility: inherit; }
  .map-legend-chip { display: inline-flex; }
  .map-legend-toggle { min-height: var(--tb-target-touch); }
}

/* ================================================================
   CELULAR: popup e legenda dividem o painel inferior, um de cada vez
   ================================================================ */
@container mapframe (max-width: 599.98px) {
  .map-popup {
    z-index: calc(var(--map-z-state) - 1);
    left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none;
    max-height: 52%; border-width: 1px 0 0; border-radius: var(--tb-radius-xl) var(--tb-radius-xl) 0 0; box-shadow: var(--tb-elevation-3);
  }
  .map-popup { display: flex; max-height: 56%; border: 0; box-shadow: none; background: none; }
  .map-popup-card { flex: 1; min-height: 0; max-height: none; border-width: 1px 0 0; border-radius: var(--tb-radius-xl) var(--tb-radius-xl) 0 0; box-shadow: var(--tb-elevation-3); }
  .map-popup-tail { display: none; }
  .map-popup-grab { display: block; flex: none; width: 36px; height: 4px; margin: 6px auto 0; border-radius: 2px; background: rgb(255 255 255 / 70%); }
  .map-popup-header { padding-top: 0; flex-wrap: wrap; }
  .map-popup-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .map-popup-grab { grid-column: 1 / -1; margin-bottom: var(--tb-space-1); }
  .map-popup-header .icon-button { width: var(--tb-target-touch); height: var(--tb-target-touch); margin: -6px 0 -6px 0; }
  .map-popup-tabs button { min-height: 44px; }
}
.map-popup[data-static] .map-popup-grab { display: none; }