/* RExNext — complementos visuais das ferramentas de mercado (demanda, sociodemográfica, RExSoft).
   Fica separado do rexnext.css (design system): só gráficos e treemaps. */

/* legenda HTML dentro do corpo do gráfico */
.chart-card-body > .chart-legend { margin-bottom: 10px; }
.chart-card-body > .chart-legend:empty { display: none; }

/* ─── Treemap (sociodemográfica · domicílios) ───────────────────────── */
.treemap { position: relative; width: 100%; height: 260px; border-radius: var(--radius-md); overflow: hidden; background: var(--gray-100); }
.tm-caixa {
  position: absolute; box-sizing: border-box; margin: 1px; padding: 8px 10px;
  border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; gap: 1px;
  line-height: 1.25; cursor: default;
  transition: left 0.5s cubic-bezier(.2,.8,.2,1), top 0.5s cubic-bezier(.2,.8,.2,1), width 0.5s cubic-bezier(.2,.8,.2,1), height 0.5s cubic-bezier(.2,.8,.2,1), background 0.4s ease;
}
.tm-caixa:hover { filter: brightness(1.06); }
.tm-nome { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-pct { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tm-n { font-size: 10px; opacity: 0.85; font-variant-numeric: tabular-nums; }
.tm-caixa.tm-pequena { padding: 5px 7px; }
.tm-caixa.tm-pequena .tm-nome { font-size: 10px; }
.tm-caixa.tm-pequena .tm-pct { font-size: 13px; }
.tm-caixa.tm-pequena .tm-n { display: none; }
.tm-caixa.tm-minima .tm-nome, .tm-caixa.tm-minima .tm-n { display: none; }
.tm-caixa.tm-minima .tm-pct { font-size: 10px; }
.treemap-legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 11px; color: var(--gray-600); }
.tm-leg { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.tm-leg strong { color: var(--gray-900); font-weight: 600; }
.tm-leg-cor { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
@media (max-width: 720px) { .treemap { height: 220px; } }
@media (prefers-reduced-motion: reduce) { .tm-caixa { transition: none; } }
@media print { .treemap { height: 200px !important; } .tm-caixa { transition: none; } }