/* icons.css — padronização visual dos ícones do painel.
   ESCOPO SEGURO: só ícones de UI (sidebar, botões, chips, títulos).
   NUNCA toca em SVG de gráficos (echarts) nem do mapa (leaflet) — evita quebrar. */

/* 1) Containers com ícone + texto: alinhamento vertical consistente */
.sb-item, .btn, .btn-icon, .tab-btn, .chip, .kpi-label, .card-title,
.page-title, .mapa-toggle, .aniv-wpp-btn, .diag-tab, .period-row .pbtn,
.rn-filter-badge, .badge-nivel {
  align-items: center;
}

/* 2) SVG de UI: não deforma, alinha ao texto (não força cor p/ não estragar ícones coloridos) */
.sb-item > svg, .btn > svg, .btn-icon > svg, .tab-btn > svg, .chip > svg,
.kpi-label > svg, .card-title > svg, .page-title > svg, .mapa-toggle > svg,
.card-actions > svg {
  flex-shrink: 0;
  vertical-align: middle;
}

/* 3) Utilitário .ico — padroniza emoji/símbolo inline (mesma largura e centro).
   Uso incremental nos módulos:  <span class="ico">📦</span> Texto
   Deixa todo emoji do mesmo tamanho e alinhado, sem "pular" a linha. */
.ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15em; min-width: 1.15em; height: 1.15em;
  line-height: 1; vertical-align: -0.15em;
  font-style: normal; flex-shrink: 0;
}
.ico + span, .ico + b, .ico + strong { margin-left: .15em; }