/* ==========================================================================
   Painel da Rede — Distribuição Geográfica (task #16)
   Mapa SVG do Brasil + grid responsivo.
   ========================================================================== */

/* O SVG injetado preenche a coluna do card, independente das dimensões
   intrínsecas do arquivo (o mapa real vem com width/height fixos em mm).
   O viewBox preserva a proporção. */
#fedMapaSvgWrap svg {
    width: 100%;
    max-width: 280px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Compactação para evitar scroll vertical no painel — task #16 polish. */
#fedMapaCard > div:last-child {
    padding: 10px !important;
    gap: 12px !important;
}
#fedMapaLegenda {
    font-size: 10px !important;
    margin-top: 4px !important;
    gap: 6px !important;
}
#fedMapaLegenda span[style*="background"] {
    width: 14px !important;
    height: 10px !important;
}
#fedMapaCard {
    margin-bottom: 12px !important;
}

/* Esconde elementos decorativos que não fazem parte do mapa. No SVG cartograma
   (atual) os rects das UFs têm class="uf-path", então passam. No SVG geográfico
   do Wikimedia (mantido em mapa-brasil-geografico.svg como reserva), os 5 rects
   de legenda regional não têm essa class → ficam escondidos. */
#fedMapaSvgWrap svg rect:not(.uf-path) {
    display: none;
}

/* Textos do cartograma — sigla e quantidade dentro de cada tile.
   Cor é setada via JS (style.fill) conforme UF ativa/inativa. */
.uf-sigla {
    font-size: 10px;
    font-weight: 500;
    fill: var(--fg-dim);
    pointer-events: none;
    font-family: inherit;
}
.uf-qtd {
    font-size: 11px;
    fill: var(--fg-dim);
    pointer-events: none;
    font-family: inherit;
}

/* Estados do mapa: hover suave. Cor de preenchimento é setada via JS (style.fill). */
.uf-path {
    transition: opacity 120ms ease;
    cursor: default;
    stroke: var(--line);     /* via CSS — atributo SVG não resolve var() */
    stroke-width: 0.5;
}
.uf-path:hover {
    opacity: 0.75;
}

/* Rótulo da sigla da UF (placeholder tile-grid). */
.uf-label {
    fill: var(--fg-dim);
    font-size: 11px;
    font-weight: 500;
    pointer-events: none;    /* não rouba o hover do tile */
    font-family: inherit;
}

/* Mobile: empilha mapa e Top 5 numa coluna só. */
@media (max-width: 720px) {
    .fed-mapa-grid {
        grid-template-columns: 1fr !important;
    }
}

/* task #16 polish — topo do painel: mapa à esquerda, KPIs à direita (50/50). */
.fed-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

/* KPIs do lado direito em grid 3x2 (sobrescreve repeat(6) padrão de .kpi-grid). */
.kpi-grid.fed-kpi-side {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px;
    align-content: start;
}

/* Mobile/tablet: empilha o topo (mapa em cima, KPIs embaixo) e KPIs em 2 colunas. */
@media (max-width: 1100px) {
    .fed-top-grid {
        grid-template-columns: 1fr;
    }
    .kpi-grid.fed-kpi-side {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
@media (max-width: 720px) {
    .kpi-grid.fed-kpi-side {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}