/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-ajqi3qj6z3] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-ajqi3qj6z3] {
    flex: 1;
}

.sidebar[b-ajqi3qj6z3] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-ajqi3qj6z3] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-ajqi3qj6z3]  a, .top-row[b-ajqi3qj6z3]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-ajqi3qj6z3]  a:hover, .top-row[b-ajqi3qj6z3]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-ajqi3qj6z3]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-ajqi3qj6z3] {
        justify-content: space-between;
    }

    .top-row[b-ajqi3qj6z3]  a, .top-row[b-ajqi3qj6z3]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-ajqi3qj6z3] {
        flex-direction: row;
    }

    .sidebar[b-ajqi3qj6z3] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-ajqi3qj6z3] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-ajqi3qj6z3]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-ajqi3qj6z3], article[b-ajqi3qj6z3] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-ajqi3qj6z3] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-ajqi3qj6z3] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-gzuld3txqs] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-gzuld3txqs] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-gzuld3txqs] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-gzuld3txqs] {
    font-size: 1.1rem;
}

.bi[b-gzuld3txqs] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-gzuld3txqs] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-gzuld3txqs] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-gzuld3txqs] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-gzuld3txqs] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-gzuld3txqs] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-gzuld3txqs] {
        padding-bottom: 1rem;
    }

    .nav-item[b-gzuld3txqs]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-gzuld3txqs]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-gzuld3txqs]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-gzuld3txqs] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-gzuld3txqs] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-gzuld3txqs] {
        display: none;
    }

    .nav-scrollable[b-gzuld3txqs] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-8kw174ea74],
.components-reconnect-repeated-attempt-visible[b-8kw174ea74],
.components-reconnect-failed-visible[b-8kw174ea74],
.components-pause-visible[b-8kw174ea74],
.components-resume-failed-visible[b-8kw174ea74],
.components-rejoining-animation[b-8kw174ea74] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-8kw174ea74],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-8kw174ea74],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-8kw174ea74],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-8kw174ea74],
#components-reconnect-modal.components-reconnect-retrying[b-8kw174ea74],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-8kw174ea74],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-8kw174ea74],
#components-reconnect-modal.components-reconnect-failed[b-8kw174ea74],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-8kw174ea74] {
    display: block;
}


#components-reconnect-modal[b-8kw174ea74] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-8kw174ea74 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-8kw174ea74 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-8kw174ea74 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-8kw174ea74]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-8kw174ea74 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-8kw174ea74 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-8kw174ea74 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-8kw174ea74 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-8kw174ea74] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-8kw174ea74] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-8kw174ea74] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-8kw174ea74] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-8kw174ea74] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-8kw174ea74] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-8kw174ea74] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-8kw174ea74 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-8kw174ea74] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-8kw174ea74 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/AnaliseCidades.razor.rz.scp.css */
/* ==========================================================================
   Análise de cidades — CSS isolado do componente.

   Cores dos quadrantes validadas para fundo escuro pelo script de paleta:
     Ideal  #B87A00 · Escala #9B6DF2 · Nicho #1A8F7A · Baixa #AAB2C2
     (ΔE 25,7 no pior par sob deuteranopia)
   "Baixa" usa cinza de propósito: é categoria residual, não uma série.
   ========================================================================== */

.analise[b-lysxwf0z04] { padding-bottom: 3rem; }

.cabecalho[b-lysxwf0z04] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 0.2rem 0 0.9rem;
}

.etiqueta[b-lysxwf0z04] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.63rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-fraco);
}

.titulo[b-lysxwf0z04] {
    margin: 0.35rem 0 0;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    letter-spacing: -0.035em;
    color: var(--text-main);
}

.resumo[b-lysxwf0z04] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.resumo b[b-lysxwf0z04] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    color: var(--text-main);
}

.resumo b.destaque[b-lysxwf0z04] { color: var(--sinal); }

.estado[b-lysxwf0z04] {
    padding: 3rem 0;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.82rem;
    color: var(--text-fraco);
}

/* ── Filtros ── */
.barra-filtros[b-lysxwf0z04] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.5rem;
    padding-bottom: 0.9rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid var(--border);
}

@media (max-width: 1300px) {
    .barra-filtros[b-lysxwf0z04] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
    .barra-filtros[b-lysxwf0z04] { grid-template-columns: 1fr 1fr; }
}

/* ── População: valor digitado ──
   Mora dentro do painel da faceta, que é de outro componente; por isso estas
   regras precisam de ::deep para atravessar o isolamento de CSS. */
[b-lysxwf0z04] .livre-rotulo {
    display: block;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--text-fraco);
    margin-bottom: 0.35rem;
}

[b-lysxwf0z04] .livre-campo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

[b-lysxwf0z04] .livre-prefixo,
[b-lysxwf0z04] .livre-sufixo {
    font-size: 0.72rem;
    color: var(--text-fraco);
    flex: none;
}

[b-lysxwf0z04] .livre-campo input {
    min-width: 0;
    flex: 1;
    padding: 0.3rem 0.5rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

[b-lysxwf0z04] .livre-campo input::-webkit-outer-spin-button,
[b-lysxwf0z04] .livre-campo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
[b-lysxwf0z04] .livre-campo input { -moz-appearance: textfield; appearance: textfield; }

/* ── Quantidade de cidades ──
   Mesma moldura das facetas ao lado, mas é campo de digitar, não dropdown:
   o valor não vem de uma lista, vem do usuário. */
.faceta-topo[b-lysxwf0z04] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.36rem 0.7rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 7px;
    transition: border-color 0.15s;
}

.faceta-topo:focus-within[b-lysxwf0z04] { border-color: var(--sinal); }

.topo-rotulo[b-lysxwf0z04] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--text-fraco);
}

.topo-campo[b-lysxwf0z04] { display: flex; align-items: center; gap: 0.35rem; }

.topo-prefixo[b-lysxwf0z04] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.78rem;
    color: var(--text-muted);
    flex: none;
}

.topo-campo input[b-lysxwf0z04] {
    min-width: 0;
    padding: 0;
    height: auto;
    background: transparent;
    border: none;
    color: var(--text-main);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.topo-campo input:focus[b-lysxwf0z04] { outline: none; box-shadow: none; background: transparent; }
.topo-campo input[b-lysxwf0z04]::placeholder { color: var(--text-fraco); }

/* A seta de incremento do Chrome rouba metade da largura do campo. */
.topo-campo input[b-lysxwf0z04]::-webkit-outer-spin-button,
.topo-campo input[b-lysxwf0z04]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.topo-campo input[b-lysxwf0z04] { -moz-appearance: textfield; appearance: textfield; }

.topo-limpa[b-lysxwf0z04] {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    display: grid;
    place-items: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--text-fraco);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
}

.topo-limpa:hover[b-lysxwf0z04] { color: var(--text-main); background: rgba(255, 255, 255, 0.06); }

/* ── Objetivo ──
   Três formas de pesar os mesmos dois eixos. Fica em destaque porque muda o
   ranking inteiro — é a decisão mais consequente da tela. */
.objetivos[b-lysxwf0z04] { margin-bottom: 1rem; }

.obj-rotulo[b-lysxwf0z04] {
    display: block;
    margin-bottom: 0.45rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-fraco);
}

.obj-lista[b-lysxwf0z04] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

@media (max-width: 760px) { .obj-lista[b-lysxwf0z04] { grid-template-columns: 1fr; } }

.obj[b-lysxwf0z04] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.15rem 0.6rem;
    padding: 0.6rem 0.8rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 9px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.16s, background-color 0.16s;
}

.obj:hover[b-lysxwf0z04] { border-color: var(--borda-forte); }

.obj.ativo[b-lysxwf0z04] {
    border-color: var(--sinal);
    background: color-mix(in oklab, var(--sinal) 7%, var(--card-bg));
}

.obj-nome[b-lysxwf0z04] { font-size: 0.85rem; font-weight: 600; color: var(--text-main); }
.obj.ativo .obj-nome[b-lysxwf0z04] { color: var(--sinal); }

.obj-desc[b-lysxwf0z04] { grid-column: 1; font-size: 0.72rem; color: var(--text-muted); }

.obj-peso[b-lysxwf0z04] {
    grid-row: 1 / 3;
    grid-column: 2;
    align-self: center;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    color: var(--text-fraco);
}

.obj.ativo .obj-peso[b-lysxwf0z04] { color: var(--sinal); }

/* ── Indicadores ── */
.indicadores[b-lysxwf0z04] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.indicador[b-lysxwf0z04] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.7rem 0.9rem;
    background: var(--bg-page);
}

.ind-rotulo[b-lysxwf0z04] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-fraco);
}

.ind-valor[b-lysxwf0z04] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--text-main);
}

.indicador.destaque .ind-valor[b-lysxwf0z04] { color: var(--sinal); }

.ind-nota[b-lysxwf0z04] {
    font-size: 0.68rem;
    color: var(--text-fraco);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Abas ── */
.abas[b-lysxwf0z04] {
    display: flex;
    gap: 0.2rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.75rem;
}

.aba[b-lysxwf0z04] {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 0.5rem 0.85rem;
    font-size: 0.82rem;
    color: var(--text-fraco);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.aba:hover[b-lysxwf0z04] { color: var(--text-muted); }

.aba.ativa[b-lysxwf0z04] {
    color: var(--sinal);
    border-bottom-color: var(--sinal);
    font-weight: 600;
}

.nota-metodo[b-lysxwf0z04] {
    margin: 0 0 0.9rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.022);
    border-left: 2px solid var(--sinal);
    border-radius: 5px;
    font-size: 0.73rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* ── Painel ── */
.painel[b-lysxwf0z04] {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.95rem 1.05rem 1.05rem;
}

.painel-topo[b-lysxwf0z04] { margin-bottom: 0.8rem; }
.painel-topo h2[b-lysxwf0z04] { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--text-main); }

.rolagem[b-lysxwf0z04] { overflow-x: auto; }

/* ── Tabela ── */
.tabela[b-lysxwf0z04] { width: 100%; border-collapse: collapse; }

.tabela th[b-lysxwf0z04] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-fraco);
    text-align: left;
    padding: 0 0.5rem 0.45rem;
    border-bottom: 1px solid var(--borda-forte);
    white-space: nowrap;
}

.tabela td[b-lysxwf0z04] {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    font-size: 0.79rem;
    vertical-align: middle;
}

.tabela tbody tr[b-lysxwf0z04] { cursor: pointer; transition: background-color 0.14s; }
.tabela tbody tr:hover td[b-lysxwf0z04] { background: rgba(255, 255, 255, 0.025); }

.tabela .num[b-lysxwf0z04], .tabela th.num[b-lysxwf0z04] { text-align: right; }

.tabela .num[b-lysxwf0z04], .percentil[b-lysxwf0z04], .score[b-lysxwf0z04], .pos[b-lysxwf0z04] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

.pos[b-lysxwf0z04] { width: 2rem; text-align: center; color: var(--text-fraco); font-size: 0.72rem; }
.pos.medalha[b-lysxwf0z04] { color: var(--sinal); font-weight: 600; }

.cidade[b-lysxwf0z04] { color: var(--text-main); white-space: nowrap; }

.cidade small[b-lysxwf0z04] {
    margin-left: 0.35rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    color: var(--text-fraco);
}

.tabela .forte[b-lysxwf0z04] { color: var(--text-main); font-weight: 600; }
.score[b-lysxwf0z04] { color: var(--sinal); font-weight: 600; }

.trilho[b-lysxwf0z04] {
    display: inline-block;
    vertical-align: middle;
    width: 54px;
    height: 5px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
}

.trilho i[b-lysxwf0z04] { display: block; height: 100%; border-radius: 3px; }

.percentil[b-lysxwf0z04] {
    margin-left: 0.45rem;
    font-size: 0.68rem;
    color: var(--text-fraco);
}

.perfil[b-lysxwf0z04] {
    display: inline-block;
    padding: 0.1rem 0.42rem;
    border: 1px solid;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    white-space: nowrap;
}

/* O rodapé passou a ter duas coisas: a contagem à esquerda e o botão de
   planilha à direita. Em tela estreita o botão cai para a linha de baixo. */
.rodape-linha[b-lysxwf0z04] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.rodape[b-lysxwf0z04] {
    margin: 0.7rem 0 0;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    color: var(--text-fraco);
}

/* ── Dispersão ──
   O fundo é um SVG esticado e os pontos são elementos posicionados por cima.
   Assim o quadrante acompanha a caixa e o círculo não deforma junto. */
.dispersao-caixa[b-lysxwf0z04] {
    position: relative;
    height: 440px;
    margin: 0.3rem 0 0.9rem 2.2rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--preto);
}

.dispersao[b-lysxwf0z04] { position: absolute; inset: 0; width: 100%; height: 100%; }

.q-ideal[b-lysxwf0z04] { fill: color-mix(in oklab, #B87A00 12%, transparent); }
.q-escala[b-lysxwf0z04] { fill: color-mix(in oklab, #9B6DF2 9%, transparent); }
.q-nicho[b-lysxwf0z04] { fill: color-mix(in oklab, #1A8F7A 10%, transparent); }

.eixo-meio[b-lysxwf0z04] {
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 0.3;
    stroke-dasharray: 1.5 1.5;
    vector-effect: non-scaling-stroke;
}

.pontos[b-lysxwf0z04] { position: absolute; inset: 0; }

.bolha[b-lysxwf0z04] {
    position: absolute;
    transform: translate(-50%, 50%);
    border: 1px solid rgba(0, 0, 0, 0.45);
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    opacity: 0.82;
    transition: opacity 0.14s, outline-color 0.14s;
    outline: 2px solid transparent;
}

.bolha:hover[b-lysxwf0z04] {
    opacity: 1;
    outline-color: var(--text-main);
    z-index: 5;
}

.eixo-x[b-lysxwf0z04], .eixo-y[b-lysxwf0z04] {
    position: absolute;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    color: var(--text-fraco);
}

.eixo-x[b-lysxwf0z04] { bottom: -1.35rem; left: 50%; transform: translateX(-50%); }
.eixo-y[b-lysxwf0z04] { left: -2.2rem; top: 50%; transform: rotate(-90deg) translateX(50%); transform-origin: left center; }

.rotulo-q[b-lysxwf0z04] {
    position: absolute;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    pointer-events: none;
}

.q-r-ideal[b-lysxwf0z04] { top: 0.5rem; right: 0.7rem; color: #DC9D41; }
.q-r-nicho[b-lysxwf0z04] { top: 0.5rem; left: 0.7rem; color: #58C0A9; }
.q-r-escala[b-lysxwf0z04] { bottom: 0.5rem; right: 0.7rem; color: #B595FD; }
.q-r-baixa[b-lysxwf0z04] { bottom: 0.5rem; left: 0.7rem; color: #AAB2C2; }

.legenda-q[b-lysxwf0z04] {
    list-style: none;
    margin: 1.6rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.4rem 1rem;
}

.legenda-q li[b-lysxwf0z04] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-fraco);
}

.legenda-q i[b-lysxwf0z04] { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.legenda-q b[b-lysxwf0z04] { color: var(--text-main); font-weight: 600; }

/* ── Síntese ── */
.sintese[b-lysxwf0z04] { display: grid; gap: 1rem; }

.destaque-lider[b-lysxwf0z04] { border-width: 1px; border-left-width: 3px; }

.lider-rotulo[b-lysxwf0z04] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-fraco);
}

.lider-nome[b-lysxwf0z04] {
    margin: 0.35rem 0 0;
    font-size: 1.5rem;
    letter-spacing: -0.03em;
    color: var(--text-main);
}

.lider-nome small[b-lysxwf0z04] {
    margin-left: 0.5rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.75rem;
    color: var(--text-fraco);
}

.lider-texto[b-lysxwf0z04] {
    margin: 0.6rem 0 0;
    max-width: 70ch;
    font-size: 0.84rem;
    line-height: 1.6;
    color: var(--text-muted);
}

.lider-texto b[b-lysxwf0z04] { color: var(--text-main); }

.lider-numeros[b-lysxwf0z04] {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 0.9rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--border);
}

.lider-numeros div[b-lysxwf0z04] { display: grid; gap: 0.15rem; }

.lider-numeros span[b-lysxwf0z04] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-fraco);
}

.lider-numeros b[b-lysxwf0z04] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-main);
}

.grupos[b-lysxwf0z04] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
}

.grupo[b-lysxwf0z04] { display: grid; gap: 0.15rem; align-content: start; }

.grupo-nome[b-lysxwf0z04] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.2rem;
}

.grupo-nome small[b-lysxwf0z04] { color: var(--text-fraco); margin-left: 0.3rem; }

.grupo-item[b-lysxwf0z04] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    width: 100%;
    padding: 0.24rem 0.2rem;
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    font-size: 0.78rem;
    color: var(--text-muted);
    transition: background-color 0.14s, color 0.14s;
}

.grupo-item:hover[b-lysxwf0z04] { background: rgba(255, 255, 255, 0.03); color: var(--text-main); }

.grupo-item small[b-lysxwf0z04] {
    margin-left: 0.3rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.6rem;
    color: var(--text-fraco);
}

.grupo-item b[b-lysxwf0z04] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-fraco);
}

.nota-dispersao[b-lysxwf0z04] {
    margin: 1.4rem 0 0;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.66rem;
    color: var(--text-fraco);
    font-variant-numeric: tabular-nums;
}

/* A versão não clicável precisa das mesmas medidas do botão. */
span.bolha[b-lysxwf0z04] { display: block; pointer-events: auto; cursor: default; }
/* /Components/Pages/BarraLista.razor.rz.scp.css */
/* ==========================================================================
   Barras horizontais — CSS do próprio componente.

   Precisa morar aqui, e não no CidadePainel.razor.css: o isolamento de CSS do
   Blazor é por componente, então regras escritas no pai não alcançam o markup
   renderizado pelo filho. A alternativa seria ::deep no pai, mas manter o
   estilo junto do componente o torna reutilizável em qualquer outra tela.

   Cor única de propósito: a magnitude já está no comprimento da barra.
   ========================================================================== */

.barras[b-d2mkuy0sgw] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.barra[b-d2mkuy0sgw] {
    display: grid;
    /* O rótulo leva a maior fatia: nomes como "EDIFICIO RESIDENCIAL" e
       "ROTA MÍDIA EXTERIOR" cortavam com a proporção anterior (0,95 contra
       1,8 da barra). O mínimo é zero de propósito — em coluna estreita a
       reticência volta, em vez de a linha estourar para fora do cartão. */
    grid-template-columns: minmax(0, 1.85fr) minmax(40px, 0.95fr) auto auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.38rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.035);
}

.barra:last-child[b-d2mkuy0sgw] { border-bottom: none; }

.barra-rotulo[b-d2mkuy0sgw] {
    font-size: 0.79rem;
    color: var(--text-muted, #838b9f);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.barra-trilho[b-d2mkuy0sgw] {
    height: 9px;
    background: rgba(255, 255, 255, 0.035);
    border-radius: 4px;
    overflow: hidden;
}

.barra-trilho i[b-d2mkuy0sgw] {
    display: block;
    height: 100%;
    /* série única no azul médio do logo, contraste >= 3:1 sobre a superfície escura */
    background: var(--serie);
    border-radius: 4px;
    transform-origin: left;
    animation: crescer-x-b-d2mkuy0sgw 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes crescer-x-b-d2mkuy0sgw {
    from { transform: scaleX(0); }
}

.barra:hover .barra-trilho i[b-d2mkuy0sgw] { background: var(--sinal); }

/* ── Modo filtro: a linha inteira é o alvo do clique ──
   O botão herda a grade da barra para o alinhamento das colunas não mudar
   entre os dois modos. */
.barra-botao[b-d2mkuy0sgw] {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.035);
    text-align: left;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.15s;
}

.barras li:last-child .barra-botao[b-d2mkuy0sgw] { border-bottom: none; }

.barra-botao:hover[b-d2mkuy0sgw] { background: rgba(255, 255, 255, 0.03); }

.barra-botao:focus-visible[b-d2mkuy0sgw] {
    outline: 2px solid var(--sinal);
    outline-offset: -2px;
}

/* Marcada: o rótulo ganha peso e o trilho acende. A cor sozinha não decide
   nada aqui — o negrito e o aria-pressed também dizem que está no filtro. */
.barra-botao.marcada .barra-rotulo[b-d2mkuy0sgw] {
    color: var(--text-main, #e7eaf2);
    font-weight: 600;
}

.barra-botao.marcada .barra-trilho i[b-d2mkuy0sgw] { background: var(--sinal); }

.barra-botao.marcada[b-d2mkuy0sgw] { background: rgba(255, 255, 255, 0.045); }

.barra-valor[b-d2mkuy0sgw],
.barra-pct[b-d2mkuy0sgw] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.barra-valor[b-d2mkuy0sgw] { color: var(--text-main, #e7eaf2); }

.barra-pct[b-d2mkuy0sgw] {
    color: var(--text-fraco, #565d70);
    min-width: 2.9rem;
}

@media (prefers-reduced-motion: reduce) {
    .barra-trilho i[b-d2mkuy0sgw] { animation: none; }
}
/* /Components/Pages/CidadePainel.razor.rz.scp.css */
/* ==========================================================================
   Painel do município — CSS isolado do componente.
   Cores dos gráficos validadas para fundo escuro pelo script de paleta:
     série única      var(--serie)   (azul médio do logo, contraste >= 3:1; hover na cor clara)
     par de gênero    #4690CC / #E15E8E  (azul × rosa, ΔE 10,0 sob protanopia)
   Texto usa sempre os tokens de tinta do tema, nunca a cor da série.
   ========================================================================== */

.cabecalho[b-idxfqttkh2] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    padding: 0.5rem 0 1.5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
}

.etiqueta[b-idxfqttkh2] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-fraco);
}

.titulo[b-idxfqttkh2] {
    margin: 0.45rem 0 0;
    font-size: clamp(1.7rem, 3.6vw, 2.4rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--text-main);
}

.sublinha[b-idxfqttkh2] {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.acoes[b-idxfqttkh2] { display: flex; gap: 0.5rem; }

.estado[b-idxfqttkh2], .sem-dado[b-idxfqttkh2] {
    padding: 2rem 0;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--text-fraco);
}

/* ── Indicadores ── */
.indicadores[b-idxfqttkh2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    background: var(--border);
    border-block: 1px solid var(--border);
    margin-bottom: 1.75rem;
}

.indicador[b-idxfqttkh2] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.95rem 1.1rem;
    background: var(--bg-page);
}

.ind-rotulo[b-idxfqttkh2] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-fraco);
}

.ind-valor[b-idxfqttkh2] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 1.32rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--text-main);
}

.ind-nota[b-idxfqttkh2] { font-size: 0.7rem; color: var(--text-fraco); }

/* ── Painéis ── */
.grade-paineis[b-idxfqttkh2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.painel-largo[b-idxfqttkh2] { grid-column: 1 / -1; }

.painel[b-idxfqttkh2] {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.15rem 1.25rem 1.35rem;
}

.painel-topo[b-idxfqttkh2] { margin-bottom: 1.1rem; }

.painel-topo-linha[b-idxfqttkh2] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.painel-topo h2[b-idxfqttkh2] {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--text-main);
}

.painel-topo p[b-idxfqttkh2] {
    margin: 0.3rem 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    max-width: 62ch;
}

.rodape-grafico[b-idxfqttkh2] {
    margin: 1rem 0 0;
    padding-top: 0.8rem;
    border-top: 1px solid var(--border);
    font-size: 0.76rem;
    color: var(--text-fraco);
    font-variant-numeric: tabular-nums;
}

.rodape-grafico strong[b-idxfqttkh2] { color: var(--text-muted); font-weight: 600; }

/* ── Colunas: distribuição etária ──
   Eixo único, marca fina, extremidade arredondada ancorada na base. */
.colunas[b-idxfqttkh2] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 2px;
    align-items: end;
    height: 190px;
}

.coluna[b-idxfqttkh2] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    gap: 0.4rem;
}

.coluna-trilho[b-idxfqttkh2] {
    display: flex;
    align-items: flex-end;
    height: 100%;
    background: rgba(255, 255, 255, 0.028);
    border-radius: 3px;
}

.coluna-trilho i[b-idxfqttkh2] {
    display: block;
    width: 100%;
    background: var(--serie);
    border-radius: 3px 3px 0 0;
    animation: subir-b-idxfqttkh2 0.6s var(--curva-suave, ease-out) both;
    transform-origin: bottom;
}

.coluna:hover .coluna-trilho i[b-idxfqttkh2] { background: var(--sinal); }

.coluna-rotulo[b-idxfqttkh2] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.58rem;
    text-align: center;
    color: var(--text-fraco);
    white-space: nowrap;
}

@keyframes subir-b-idxfqttkh2 { from { transform: scaleY(0); } }

/* ── Divisão por sexo: duas séries, 2px de respiro entre os blocos ── */
.divisao[b-idxfqttkh2] {
    display: flex;
    gap: 2px;
    height: 26px;
    margin-bottom: 1rem;
}

.divisao span[b-idxfqttkh2] { border-radius: 3px; }
/* ── Gênero ──
   Azul para homens, rosa para mulheres: é a leitura que o público já traz
   pronta, e num gráfico de duas fatias a convenção vale mais que a novidade.
   Os dois tons foram medidos, não copiados: o azul é um degrau da rampa do
   mapa e o rosa foi posicionado na mesma faixa de luminosidade, o que dá
   ΔE 10,0 sob protanopia e 4,3:1 de contraste sobre o cartão. */
.divisao-h[b-idxfqttkh2] { background: #4690CC; }
.divisao-m[b-idxfqttkh2] { background: #E15E8E; }

.legenda[b-idxfqttkh2] { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }

.legenda li[b-idxfqttkh2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.legenda b[b-idxfqttkh2] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-weight: 600;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}

.legenda span[b-idxfqttkh2] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    color: var(--text-fraco);
    font-variant-numeric: tabular-nums;
    min-width: 3.4rem;
    text-align: right;
}

.marca[b-idxfqttkh2] { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.marca-h[b-idxfqttkh2] { background: #4690CC; }
.marca-m[b-idxfqttkh2] { background: #E15E8E; }

/* ── Mapa de calor ── */
.mapa[b-idxfqttkh2] { display: grid; gap: 0.5rem; }

.mapa-cabecalho[b-idxfqttkh2],
.mapa-linha[b-idxfqttkh2] {
    display: grid;
    grid-template-columns: minmax(150px, 230px) repeat(var(--colunas, 6), minmax(42px, 1fr));
    gap: 2px;
    align-items: center;
}

.mapa-classe[b-idxfqttkh2] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.64rem;
    font-weight: 600;
    text-align: center;
    color: var(--text-fraco);
    letter-spacing: 0.05em;
}

.rolagem-mapa[b-idxfqttkh2] {
    max-height: 520px;
    overflow-y: auto;
    display: grid;
    gap: 2px;
    padding-right: 4px;
}

.mapa-linha[b-idxfqttkh2] { padding: 1px 0; }

.mapa-rotulo[b-idxfqttkh2] {
    font-size: 0.74rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 0.5rem;
}

/* A célula agora carrega o número do índice: a leitura não depende só da cor,
   que é o requisito de acessibilidade para escala divergente. */
.mapa-celula[b-idxfqttkh2] {
    height: 21px;
    display: grid;
    place-items: center;
    border-radius: 2px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.63rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: outline-color 0.12s;
    outline: 2px solid transparent;
}

.mapa-linha:hover .mapa-celula[b-idxfqttkh2] { outline-color: rgba(255, 255, 255, 0.08); }
.mapa-celula:hover[b-idxfqttkh2] { outline-color: var(--text-main); }

.mapa-legenda[b-idxfqttkh2] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-top: 0.7rem;
    border-top: 1px solid var(--border);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.64rem;
    color: var(--text-fraco);
}

.mapa-legenda i[b-idxfqttkh2] {
    width: 24px;
    height: 12px;
    border-radius: 2px;
}

/* A legenda é a mesma rampa das células, desenhada como uma faixa só. O 100
   fica marcado no ponto onde ele cai na escala logarítmica: metade do
   caminho, porque 25 e 400 são as pontas. */
.faixa-escala[b-idxfqttkh2] {
    position: relative;
    flex: 1;
    max-width: 16rem;
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(90deg,
        #324457 0%, #365D5F 16%, #377665 32%, #368F6B 48%,
        #31AA70 65%, #27C573 81%, #0DE076 97%, #00E676 100%);
}

.faixa-escala b[b-idxfqttkh2] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.54rem;
    font-weight: 700;
    color: #000000;
    letter-spacing: 0.02em;
}

.mapa-legenda span:first-child[b-idxfqttkh2] { margin-right: 0.35rem; }
.mapa-legenda span:last-child[b-idxfqttkh2] { margin-left: 0.35rem; }

.rolagem[b-idxfqttkh2] { overflow-x: auto; }

.num[b-idxfqttkh2] {
    text-align: right;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
}

@media (prefers-reduced-motion: reduce) {
    .coluna-trilho i[b-idxfqttkh2] { animation: none; }
}

/* ── Ordenação: os rótulos das classes viram controles ── */
.mapa-classe[b-idxfqttkh2] {
    background: none;
    border: none;
    padding: 0.2rem 0.1rem;
    cursor: pointer;
    border-radius: 3px;
    transition: color 0.15s, background-color 0.15s;
}

.mapa-classe:hover[b-idxfqttkh2] {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.045);
}

.mapa-classe.ativo[b-idxfqttkh2] {
    color: var(--sinal);
    background: color-mix(in oklab, var(--sinal) 10%, transparent);
}

.mapa-amplitude[b-idxfqttkh2] {
    text-align: left;
    padding-left: 0;
    font-size: 0.6rem;
}

.th-ordena[b-idxfqttkh2] {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.th-ordena:hover[b-idxfqttkh2] { color: var(--sinal); }

/* ── Botão e painel de ajuda ── */
.botao-ajuda[b-idxfqttkh2] {
    width: 34px;
    padding: 0;
    display: grid;
    place-items: center;
    flex: none;
}

.botao-ajuda.aberto[b-idxfqttkh2] {
    border-color: var(--sinal);
    color: var(--sinal);
}

.sinal-ajuda[b-idxfqttkh2] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.85rem;
    font-weight: 600;
    font-style: italic;
    line-height: 1;
}

.explicacao[b-idxfqttkh2] {
    margin: 0 0 1.25rem;
    padding: 1.1rem 1.25rem;
    background: rgba(255, 255, 255, 0.022);
    border: 1px solid var(--border);
    border-left: 2px solid var(--sinal);
    border-radius: 8px;
    animation: abrir-b-idxfqttkh2 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes abrir-b-idxfqttkh2 {
    from { opacity: 0; transform: translateY(-6px); }
}

.explicacao h3[b-idxfqttkh2] {
    margin: 0 0 0.7rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-main);
}

.explicacao p[b-idxfqttkh2] {
    margin: 0 0 0.8rem;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-muted);
    max-width: 78ch;
}

.explicacao em[b-idxfqttkh2] { color: var(--text-main); font-style: normal; font-weight: 600; }

.formula[b-idxfqttkh2] {
    margin: 0 0 0.9rem;
    padding: 0.8rem 1rem;
    background: var(--bg-page);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--text-main);
    white-space: pre;
    overflow-x: auto;
}

.leitura[b-idxfqttkh2] {
    list-style: none;
    margin: 0 0 0.9rem;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}

.leitura li[b-idxfqttkh2] {
    font-size: 0.8rem;
    color: var(--text-muted);
    padding-left: 0.9rem;
    position: relative;
}

.leitura li[b-idxfqttkh2]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 4px;
    height: 4px;
    border-radius: 1px;
    background: var(--text-fraco);
}

.leitura b[b-idxfqttkh2] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    color: var(--text-main);
    font-weight: 600;
}

.exemplo strong[b-idxfqttkh2] { color: var(--text-main); font-weight: 600; }

.nota[b-idxfqttkh2] {
    margin-bottom: 0 !important;
    padding-top: 0.8rem;
    border-top: 1px solid var(--border);
    font-size: 0.78rem !important;
    color: var(--text-fraco) !important;
}
/* /Components/Pages/Filtro.razor.rz.scp.css */
/* ==========================================================================
   Faceta em dropdown — CSS do próprio componente.
   Isolamento do Blazor é por componente: regras escritas na página não
   alcançam este markup.
   ========================================================================== */

.faceta[b-qwjlo6210n] {
    position: relative;
    min-width: 0;
}

.gatilho[b-qwjlo6210n] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.7rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 7px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background-color 0.15s;
}

.gatilho:hover[b-qwjlo6210n] { border-color: var(--borda-forte); }

.faceta.aberta .gatilho[b-qwjlo6210n] {
    border-color: var(--sinal);
    background: var(--elevado, #151a24);
}

.gatilho-rotulo[b-qwjlo6210n] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--text-fraco);
    flex: none;
}

.gatilho-valor[b-qwjlo6210n] {
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}

.seta[b-qwjlo6210n] { color: var(--text-fraco); font-size: 0.6rem; flex: none; }
.faceta.aberta .seta[b-qwjlo6210n] { color: var(--sinal); }

/* Camada que captura o clique fora, sem JavaScript. */
.fora[b-qwjlo6210n] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.painel-faceta[b-qwjlo6210n] {
    position: absolute;
    z-index: 41;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 220px;
    background: var(--elevado, #151a24);
    border: 1px solid var(--borda-forte);
    border-radius: 8px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    animation: abrir-b-qwjlo6210n 0.16s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes abrir-b-qwjlo6210n {
    from { opacity: 0; transform: translateY(-4px); }
}

.busca[b-qwjlo6210n] {
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    font-size: 0.78rem;
    padding: 0.55rem 0.7rem;
}

.opcoes[b-qwjlo6210n] {
    max-height: 260px;
    overflow-y: auto;
    padding: 0.25rem;
}

.opcao-faceta[b-qwjlo6210n] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.34rem 0.5rem;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.79rem;
    color: var(--text-muted);
    transition: background-color 0.12s, color 0.12s;
}

.opcao-faceta:hover[b-qwjlo6210n] { background: rgba(255, 255, 255, 0.045); color: var(--text-main); }

/* O input real fica oculto; a marca desenhada abaixo é o que aparece. */
.opcao-faceta input[b-qwjlo6210n] { position: absolute; opacity: 0; pointer-events: none; }

.marca-check[b-qwjlo6210n] {
    flex: none;
    width: 14px;
    height: 14px;
    border: 1px solid var(--borda-forte);
    border-radius: 3px;
    display: grid;
    place-items: center;
    transition: background-color 0.12s, border-color 0.12s;
}

.marca-check[b-qwjlo6210n]::after {
    content: '';
    width: 7px;
    height: 4px;
    border-left: 2px solid var(--tinta-sobre-sinal);
    border-bottom: 2px solid var(--tinta-sobre-sinal);
    transform: rotate(-45deg) scale(0);
    transition: transform 0.14s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.opcao-faceta input:checked ~ .marca-check[b-qwjlo6210n] {
    background: var(--sinal);
    border-color: var(--sinal);
}

.opcao-faceta input:checked ~ .marca-check[b-qwjlo6210n]::after { transform: rotate(-45deg) scale(1); }

.opcao-faceta input:checked ~ .opcao-nome[b-qwjlo6210n] { color: var(--text-main); font-weight: 600; }

.opcao-nome[b-qwjlo6210n] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Item sem dado no recorte: selecionar zera o público, então o estado é
   explícito em vez de silencioso. */
.opcao-faceta.vazia[b-qwjlo6210n] { opacity: 0.5; }

.sem-dado[b-qwjlo6210n] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.58rem;
    color: var(--text-fraco);
    flex: none;
}

.nada[b-qwjlo6210n] { padding: 0.7rem 0.6rem; margin: 0; font-size: 0.76rem; color: var(--text-fraco); }

/* Trecho que a página injeta no fim do painel. A borda separa o que é lista
   do que é digitado. */
.extra-faceta[b-qwjlo6210n] {
    padding: 0.55rem 0.7rem;
    border-top: 1px solid var(--border);
}

.rodape-faceta[b-qwjlo6210n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0.7rem;
    border-top: 1px solid var(--border);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.66rem;
    color: var(--text-fraco);
}

.rodape-faceta button[b-qwjlo6210n] {
    background: none;
    border: none;
    padding: 0;
    color: var(--sinal);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ==========================================================================
   Navegar — inventário de mídia por região, estado e município.
   Estilos isolados por componente (CSS isolation do Blazor): nada aqui vaza
   para as outras telas nem depende do app.css.
   ========================================================================== */

/* Contador do escalonamento de entrada. Cada item recebe --i no markup e
   deriva o próprio atraso, em vez de uma regra :nth-child por item. */
@property --proporcao {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: false;
}

/* ── Topo: assimétrico de propósito ──
   Coluna de texto larga à esquerda, medidor estreito à direita. Grade
   simétrica de cartões é o que faz uma tela parecer template. */
.topo[b-2rc2b7g8w3] {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.85fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: end;
    padding: clamp(1.5rem, 4vw, 3rem) 0 2rem;
    border-bottom: 1px solid var(--border);
    animation: entrada-b-2rc2b7g8w3 0.6s var(--curva) both;
}

@media (max-width: 860px) {
    .topo[b-2rc2b7g8w3] { grid-template-columns: 1fr; align-items: start; }
}

.etiqueta[b-2rc2b7g8w3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--text-fraco);
}

/* Ponto que respira: único elemento em laço contínuo da página, e ele
   significa algo — sistema conectado à base. */
.pulso[b-2rc2b7g8w3] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sinal);
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--sinal) 60%, transparent);
    animation: pulsar-b-2rc2b7g8w3 2.6s var(--curva-suave) infinite;
}

@keyframes pulsar-b-2rc2b7g8w3 {
    0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--sinal) 55%, transparent); }
    70%  { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.titulo[b-2rc2b7g8w3] {
    margin: 0.7rem 0 0;
    font-size: clamp(1.9rem, 4.6vw, 3rem);
    line-height: 1;
    letter-spacing: -0.04em;
    font-weight: 700;
    color: var(--text-main);
    text-wrap: balance;
}

.linha-fina[b-2rc2b7g8w3] {
    margin: 1rem 0 0;
    max-width: 52ch;
    font-size: 0.94rem;
    line-height: 1.55;
    color: var(--text-muted);
    text-wrap: pretty;
}

/* ── Medidor principal ──
   Um número dominante em vez de quatro cartões de mesmo peso. */
.medidor[b-2rc2b7g8w3] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1.15rem 1.3rem;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), transparent 60%), var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
}

.medidor[b-2rc2b7g8w3]::before {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, var(--sinal), transparent 60%);
}

.medidor-rotulo[b-2rc2b7g8w3] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-fraco);
}

.medidor-numero[b-2rc2b7g8w3] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: clamp(2.1rem, 4.4vw, 2.9rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--text-main);
}

.medidor-barra[b-2rc2b7g8w3] {
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

/* Mede de verdade: a fatia do inventário do país que o recorte representa.
   No Brasil inteiro preenche tudo; num estado, encolhe. */
.medidor-barra i[b-2rc2b7g8w3] {
    display: block;
    height: 100%;
    width: var(--proporcao, 0%);
    background: linear-gradient(90deg, color-mix(in oklab, var(--serie) 55%, transparent), var(--serie));
    transition: width 0.45s var(--curva-suave);
}

.medidor-nota[b-2rc2b7g8w3] {
    font-size: 0.76rem;
    color: var(--text-fraco);
    font-variant-numeric: tabular-nums;
}

/* ── Faixa de indicadores ── */
.indicadores[b-2rc2b7g8w3] {
    display: grid;
    /* min() no minmax: sem ele a coluna força 150px mesmo num container
       mais estreito, e a página passa a rolar de lado no celular. */
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: 1px;
    margin: 0 0 1.5rem;
    background: var(--border);
    border-bottom: 1px solid var(--border);
}

/* Separados por filete de 1px em vez de cartões soltos: lê como painel
   contínuo de instrumento. */
.indicador[b-2rc2b7g8w3] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1rem 1.15rem;
    background: var(--bg-page);
    animation: entrada-b-2rc2b7g8w3 0.5s var(--curva) both;
    animation-delay: calc(0.06s * var(--i, 0) + 0.1s);
}

.indicador-rotulo[b-2rc2b7g8w3] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.63rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-fraco);
}

.indicador-numero[b-2rc2b7g8w3] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--text-main);
}

/* ── Trilha ── */
.trilha[b-2rc2b7g8w3] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.78rem;
}

.trilha-item[b-2rc2b7g8w3] {
    background: none;
    border: none;
    padding: 0.2rem 0;
    color: var(--text-fraco);
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: color 0.16s var(--curva-suave);
}

.trilha-item:hover:not(.ativo)[b-2rc2b7g8w3] { color: var(--text-main); }

.trilha-item.ativo[b-2rc2b7g8w3] {
    color: var(--sinal);
    cursor: default;
}

.trilha-sep[b-2rc2b7g8w3] { color: var(--text-fraco); opacity: 0.55; }

/* ── Corpo: lista à esquerda, composição do recorte à direita ──
   A composição fica grudada no topo porque a lista de municípios é longa e
   ela é justamente o que muda a cada clique. */
.corpo[b-2rc2b7g8w3] {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(270px, 0.75fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    padding-bottom: 3rem;
    align-items: start;
}

@media (max-width: 1080px) {
    .corpo[b-2rc2b7g8w3] { grid-template-columns: 1fr; }
}

.navegador[b-2rc2b7g8w3] { animation: entrada-b-2rc2b7g8w3 0.55s var(--curva) 0.22s both; }

.composicao[b-2rc2b7g8w3] {
    display: grid;
    gap: 1rem;
    animation: entrada-b-2rc2b7g8w3 0.55s var(--curva) 0.3s both;
}

/* ── Painéis ── */
.painel[b-2rc2b7g8w3] {
    padding: 1.1rem 1.2rem 1.25rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.painel-topo[b-2rc2b7g8w3] { margin-bottom: 0.9rem; }

.painel-topo h2[b-2rc2b7g8w3] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-main);
}

.painel-nota[b-2rc2b7g8w3] {
    margin: 0.2rem 0 0;
    font-size: 0.74rem;
    color: var(--text-fraco);
}

.painel-rodape[b-2rc2b7g8w3] {
    margin: 0.9rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.vazio-bloco[b-2rc2b7g8w3] {
    margin: 0;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.78rem;
    color: var(--text-fraco);
}

/* ── Rolagem das listas ──
   Teto de linhas visíveis para os cartões terem alturas parecidas: sem isso
   "tipos de mídia" com 42 linhas fica ao lado de "tipos de exibição" com 3.
   O que passa do teto continua acessível rolando dentro do próprio cartão. */
.rolo[b-2rc2b7g8w3] {
    --linhas: 15;
    max-height: calc(var(--linhas) * 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--borda-forte) transparent;

    /* Espaço para a barra de rolagem não cobrir a coluna de percentual. */
    padding-right: 0.4rem;
    margin-right: -0.4rem;
}

/* Na coluna lateral os cartões são três, um sob o outro: 10 linhas mantêm a
   coluna perto da altura da lista ao lado. */
.composicao .rolo[b-2rc2b7g8w3] { --linhas: 10; }

.rolo[b-2rc2b7g8w3]::-webkit-scrollbar { width: 6px; }
.rolo[b-2rc2b7g8w3]::-webkit-scrollbar-track { background: transparent; }

.rolo[b-2rc2b7g8w3]::-webkit-scrollbar-thumb {
    background: var(--borda-forte);
    border-radius: 3px;
}

/* ── Filtros ativos ──
   Clicar numa barra filtra; sem um lugar que diga o que está filtrado, os
   números da página passam a discordar do que a pessoa lembra ter clicado. */
.chips[b-2rc2b7g8w3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: -0.35rem 0 1.3rem;
}

.chips-rotulo[b-2rc2b7g8w3] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.64rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-fraco);
    margin-right: 0.15rem;
}

.chip[b-2rc2b7g8w3] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 22rem;
    padding: 0.24rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--sinal);
    background: var(--sinal);
    color: var(--tinta-sobre-sinal);
    font-size: 0.74rem;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip-x[b-2rc2b7g8w3] { font-size: 0.95rem; line-height: 1; opacity: 0.7; }
.chip:hover .chip-x[b-2rc2b7g8w3] { opacity: 1; }

.chip:focus-visible[b-2rc2b7g8w3], .chip-limpar:focus-visible[b-2rc2b7g8w3] {
    outline: 2px solid var(--text-main);
    outline-offset: 2px;
}

.chip-limpar[b-2rc2b7g8w3] {
    padding: 0.24rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.74rem;
    cursor: pointer;
    transition: border-color 0.16s, color 0.16s;
}

.chip-limpar:hover[b-2rc2b7g8w3] { border-color: var(--borda-forte); color: var(--text-main); }

/* ── Listas ──
   Linhas, não cartões. Um inventário é uma lista; forçar grade de caixinhas
   seria decorar em vez de organizar. */
.lista-regioes[b-2rc2b7g8w3], .lista-estados[b-2rc2b7g8w3], .lista-municipios[b-2rc2b7g8w3] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lista-regioes li[b-2rc2b7g8w3], .lista-estados li[b-2rc2b7g8w3], .lista-municipios li[b-2rc2b7g8w3] {
    animation: entrada-b-2rc2b7g8w3 0.42s var(--curva) both;
    animation-delay: calc(0.035s * var(--i, 0));
}

.regiao[b-2rc2b7g8w3], .estado[b-2rc2b7g8w3], .municipio[b-2rc2b7g8w3] {
    display: grid;
    align-items: center;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 0.95rem 1rem 0.95rem 0.9rem;
    color: var(--text-main);
    cursor: pointer;
    position: relative;
    transition: background-color 0.18s var(--curva-suave), padding-left 0.18s var(--curva-suave);
}

/* Marca de seleção que cresce da esquerda: substitui o hover de fundo
   inteiro, que é o gesto mais batido que existe. */
.regiao[b-2rc2b7g8w3]::before, .estado[b-2rc2b7g8w3]::before, .municipio[b-2rc2b7g8w3]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 2px;
    height: 0;
    background: var(--sinal);
    transform: translateY(-50%);
    transition: height 0.22s var(--curva-suave);
}

.regiao:hover[b-2rc2b7g8w3], .estado:hover[b-2rc2b7g8w3], .municipio:hover[b-2rc2b7g8w3] {
    background: rgba(255, 255, 255, 0.022);
    padding-left: 1.25rem;
}

.regiao:hover[b-2rc2b7g8w3]::before, .estado:hover[b-2rc2b7g8w3]::before, .municipio:hover[b-2rc2b7g8w3]::before {
    height: 62%;
}

/* Região: nome | medidas | barra proporcional */
.regiao[b-2rc2b7g8w3] {
    grid-template-columns: minmax(0, 1fr) auto minmax(90px, 170px);
    gap: 1.25rem;
}

.regiao-nome[b-2rc2b7g8w3] {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.regiao-medidas[b-2rc2b7g8w3] {
    display: flex;
    gap: 1.25rem;
}

.regiao-valor[b-2rc2b7g8w3] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    white-space: nowrap;
}

.regiao-valor small[b-2rc2b7g8w3] {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-fraco);
    margin-left: 0.35rem;
}

@media (max-width: 720px) {
    .regiao[b-2rc2b7g8w3] { grid-template-columns: minmax(0, 1fr) auto; }
    .regiao-barra[b-2rc2b7g8w3] { display: none; }
}

/* Barra proporcional: o dado vira forma. A maior região preenche tudo,
   as outras aparecem em relação a ela. */
.regiao-barra[b-2rc2b7g8w3] {
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.regiao-barra i[b-2rc2b7g8w3] {
    display: block;
    height: 100%;
    width: var(--proporcao, 0%);
    background: var(--serie);
    animation: crescer-b-2rc2b7g8w3 0.8s var(--curva-suave) both;
    animation-delay: calc(0.05s * var(--i, 0) + 0.25s);
}

@keyframes crescer-b-2rc2b7g8w3 { from { width: 0%; } }

/* Estado: sigla em destaque | nome | contagem */
.estado[b-2rc2b7g8w3] {
    grid-template-columns: 3.2rem minmax(0, 1fr) auto;
    gap: 1rem;
}

.estado-sigla[b-2rc2b7g8w3] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--sinal);
    letter-spacing: 0.02em;
}

.estado-nome[b-2rc2b7g8w3] {
    font-size: 0.96rem;
    color: var(--text-main);
}

.estado-contagem[b-2rc2b7g8w3] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    white-space: nowrap;
}

.estado-contagem small[b-2rc2b7g8w3] {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-fraco);
    margin-left: 0.35rem;
}

/* Município: lista longa, então em colunas via container query — a coluna
   reage à largura do próprio bloco, não à da janela. */
.lista-municipios[b-2rc2b7g8w3] {
    container-type: inline-size;
    columns: 1;
}

@container (min-width: 620px) {
    .lista-municipios[b-2rc2b7g8w3] { columns: 2; column-gap: 2rem; }
}

.lista-municipios li[b-2rc2b7g8w3] { break-inside: avoid; }

.municipio[b-2rc2b7g8w3] {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    padding-block: 0.6rem;
}

.municipio-nome[b-2rc2b7g8w3] {
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.municipio-pontos[b-2rc2b7g8w3] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.municipio-pontos small[b-2rc2b7g8w3] {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-fraco);
    margin-left: 0.3rem;
}

/* ── Busca e alternador ── */
.busca[b-2rc2b7g8w3] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.busca-contagem[b-2rc2b7g8w3] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.76rem;
    color: var(--text-fraco);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.alternar[b-2rc2b7g8w3] {
    margin-top: 1rem;
    padding: 0.4rem 0.8rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.76rem;
    cursor: pointer;
    transition: border-color 0.16s, color 0.16s;
}

.alternar:hover[b-2rc2b7g8w3] { border-color: var(--borda-forte); color: var(--text-main); }

/* ── Detalhe do município ── */
.detalhe[b-2rc2b7g8w3] {
    padding-bottom: 3rem;
    animation: entrada-b-2rc2b7g8w3 0.5s var(--curva) both;
}

.fichas[b-2rc2b7g8w3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 1px;
    margin-bottom: 1.25rem;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.ficha[b-2rc2b7g8w3] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.95rem 1.1rem;
    background: var(--card-bg);
}

.ficha-rotulo[b-2rc2b7g8w3] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-fraco);
}

.ficha-valor[b-2rc2b7g8w3] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--text-main);
}

.ficha-nota[b-2rc2b7g8w3] {
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--text-muted);
}

.blocos[b-2rc2b7g8w3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 1rem;
    align-items: start;
}

/* Medidas de fluxo: rótulo, número, unidade. O número é o que se lê primeiro,
   a unidade fica recessiva para não competir com ele. */
.medidas[b-2rc2b7g8w3] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.medidas li[b-2rc2b7g8w3] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.6rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.medidas li:last-child[b-2rc2b7g8w3] { border-bottom: none; padding-bottom: 0; }

.medida-rotulo[b-2rc2b7g8w3] {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.medida-valor[b-2rc2b7g8w3] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-main);
    text-align: right;
}

.medida-unidade[b-2rc2b7g8w3] {
    grid-column: 2;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-fraco);
    text-align: right;
}

/* ── Maiores pontos por fluxo ── */
.pontos-lista[b-2rc2b7g8w3] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.1rem;
}

.pontos-lista li[b-2rc2b7g8w3] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem 0.8rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}

.pontos-lista li:last-child[b-2rc2b7g8w3] { border-bottom: none; }

.ponto-nome[b-2rc2b7g8w3] {
    font-size: 0.82rem;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ponto-nome small[b-2rc2b7g8w3] {
    display: block;
    font-size: 0.68rem;
    color: var(--text-fraco);
    overflow: hidden;
    text-overflow: ellipsis;
}

.ponto-tipo[b-2rc2b7g8w3] {
    grid-column: 1;
    grid-row: 2;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.63rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-fraco);
}

.ponto-fluxo[b-2rc2b7g8w3] {
    grid-column: 2;
    grid-row: 1 / span 2;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.88rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-main);
}

.acoes-detalhe[b-2rc2b7g8w3] {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.5rem;
}

/* ── Tabela de pontos ──
   A base crua embaixo das somas. Colunas de largura fixa porque o Virtualize
   monta e desmonta linhas ao rolar: com largura automática cada lote de linhas
   remediria as colunas e a tabela ficaria tremendo. */
.tabela-bloco[b-2rc2b7g8w3] {
    margin: 0 0 3rem;
    animation: entrada-b-2rc2b7g8w3 0.5s var(--curva) both;
}

.tabela-topo[b-2rc2b7g8w3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Busca e botão dividem a direita do cabeçalho; em tela estreita a busca
   ocupa a linha inteira, que é o que ela precisa. */
.tabela-acoes[b-2rc2b7g8w3] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.busca-ponto[b-2rc2b7g8w3] { position: relative; display: flex; }

.busca-ponto input[b-2rc2b7g8w3] { min-width: 15rem; padding-right: 1.9rem; }

.busca-limpa[b-2rc2b7g8w3] {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.2rem;
    height: 1.2rem;
    display: grid;
    place-items: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--text-fraco);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.busca-limpa:hover[b-2rc2b7g8w3] { color: var(--text-main); background: rgba(255, 255, 255, 0.06); }

.tabela-rolo[b-2rc2b7g8w3] {
    max-height: 30rem;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--border);
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--borda-forte) transparent;
}

.tabela-rolo[b-2rc2b7g8w3]::-webkit-scrollbar { width: 8px; height: 8px; }
.tabela-rolo[b-2rc2b7g8w3]::-webkit-scrollbar-track { background: transparent; }
.tabela-rolo[b-2rc2b7g8w3]::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 4px; }

.tabela[b-2rc2b7g8w3] {
    width: 100%;
    min-width: 62rem;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.76rem;
}

.tabela thead th[b-2rc2b7g8w3] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0;
    background: var(--elevado);
    border-bottom: 1px solid var(--borda-forte);
    text-align: left;
    font-weight: 500;
}

.th-botao[b-2rc2b7g8w3] {
    width: 100%;
    padding: 0.55rem 0.6rem;
    background: transparent;
    border: none;
    color: var(--text-fraco);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.th-botao:hover[b-2rc2b7g8w3] { color: var(--text-main); }
.th-botao.ativa[b-2rc2b7g8w3] { color: var(--sinal); }
.th-botao:focus-visible[b-2rc2b7g8w3] { outline: 2px solid var(--sinal); outline-offset: -2px; }

.seta[b-2rc2b7g8w3] { font-size: 0.7rem; }

.tabela tbody tr[b-2rc2b7g8w3] { border-bottom: 1px solid var(--border); }
.tabela tbody tr:hover[b-2rc2b7g8w3] { background: rgba(255, 255, 255, 0.022); }

.tabela td[b-2rc2b7g8w3] {
    padding: 0.35rem 0.6rem;
    height: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    vertical-align: middle;
}

/* Larguras por tipo de coluna, na ordem do cabeçalho. */
.tabela .c-nome[b-2rc2b7g8w3] { width: 18%; color: var(--text-main); }
.tabela .c-texto[b-2rc2b7g8w3] { width: 11%; }
.tabela .c-curta[b-2rc2b7g8w3] { width: 6%; }

.tabela .c-num[b-2rc2b7g8w3] {
    width: 8%;
    text-align: right;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    color: var(--text-main);
}

.tabela .c-num .th-botao[b-2rc2b7g8w3] { text-align: right; }
.tabela thead .c-num .th-botao[b-2rc2b7g8w3] { text-align: right; }

.tabela .c-vazia[b-2rc2b7g8w3] { color: var(--text-fraco); }

.tabela .c-nome small[b-2rc2b7g8w3] {
    display: block;
    font-size: 0.66rem;
    color: var(--text-fraco);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Estados ── */
.carregando[b-2rc2b7g8w3], .vazio[b-2rc2b7g8w3] {
    padding: 2.5rem 0;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    color: var(--text-fraco);
}

@keyframes entrada-b-2rc2b7g8w3 {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .topo[b-2rc2b7g8w3], .indicador[b-2rc2b7g8w3], .navegador[b-2rc2b7g8w3], .composicao[b-2rc2b7g8w3], .detalhe[b-2rc2b7g8w3], .tabela-bloco[b-2rc2b7g8w3],
    .lista-regioes li[b-2rc2b7g8w3], .lista-estados li[b-2rc2b7g8w3], .lista-municipios li[b-2rc2b7g8w3],
    .regiao-barra i[b-2rc2b7g8w3], .pulso[b-2rc2b7g8w3] {
        animation: none;
    }
    .medidor-barra i[b-2rc2b7g8w3] { transition: none; }
    .regiao-barra i[b-2rc2b7g8w3] { width: var(--proporcao, 0%); }
}
/* /Components/Pages/VisaoGeral.razor.rz.scp.css */
/* ==========================================================================
   Visão geral do país — CSS isolado do componente.
   Rampa do mapa validada para fundo escuro (sequencial, um só matiz).
   ========================================================================== */

.cabecalho[b-wjjeir1wjn] {
    padding: 0.5rem 0 1.5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
}

.etiqueta[b-wjjeir1wjn] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-fraco);
}

.titulo[b-wjjeir1wjn] {
    margin: 0.45rem 0 0;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--text-main);
}

.sublinha[b-wjjeir1wjn] {
    margin: 0.6rem 0 0;
    max-width: 60ch;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.estado[b-wjjeir1wjn] {
    padding: 3rem 0;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.82rem;
    color: var(--text-fraco);
}

/* ── Indicadores ── */
.indicadores[b-wjjeir1wjn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr));
    gap: 1px;
    background: var(--border);
    border-block: 1px solid var(--border);
    margin-bottom: 1.25rem;
}

.indicador[b-wjjeir1wjn] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.9rem 1.05rem;
    background: var(--bg-page);
}

.ind-rotulo[b-wjjeir1wjn] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.61rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-fraco);
}

.ind-valor[b-wjjeir1wjn] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 1.28rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--text-main);
}

/* População e domicílios saem por extenso: 212.601.233 tem onze caracteres,
   quase o dobro de "212,6 mi". Sem reduzir o corpo, a coluna estoura no
   monoespaçado e o número quebra em duas linhas. */
.ind-valor.longo[b-wjjeir1wjn] {
    font-size: 1.05rem;
    letter-spacing: -0.04em;
}

/* O cifrão é unidade, não valor: fica um passo atrás para o número continuar
   sendo a primeira coisa que se lê. */
.ind-moeda[b-wjjeir1wjn] {
    font-size: 0.72em;
    font-weight: 500;
    color: var(--text-fraco);
    margin-right: 0.25em;
}

.ind-nota[b-wjjeir1wjn] { font-size: 0.68rem; color: var(--text-fraco); }

/* ── Composição: mapa à esquerda, lista à direita ── */
.mapa-bloco[b-wjjeir1wjn] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    gap: 1rem;
    align-items: start;
    padding-bottom: 3rem;
}

@media (max-width: 960px) {
    .mapa-bloco[b-wjjeir1wjn] { grid-template-columns: 1fr; }
}

.painel[b-wjjeir1wjn] {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.15rem 1.25rem 1.35rem;
}

.painel-topo[b-wjjeir1wjn] { margin-bottom: 1rem; }

.painel-topo-linha[b-wjjeir1wjn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.painel-topo h2[b-wjjeir1wjn] {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--text-main);
}

.painel-topo p[b-wjjeir1wjn] {
    margin: 0.3rem 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* ── Seletor de indicador ── */
.seletor[b-wjjeir1wjn] { display: flex; gap: 2px; flex-wrap: wrap; }

.opcao[b-wjjeir1wjn] {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 0.3rem 0.62rem;
    font-size: 0.74rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.opcao:hover[b-wjjeir1wjn] { color: var(--text-main); border-color: var(--borda-forte); }

.opcao.ativo[b-wjjeir1wjn] {
    color: var(--tinta-sobre-sinal);
    background: var(--sinal);
    border-color: var(--sinal);
    font-weight: 600;
}

/* ── Mapa ── */
.mapa[b-wjjeir1wjn] {
    width: 100%;
    height: auto;
    max-height: 62vh;
    display: block;
}

.uf[b-wjjeir1wjn] {
    stroke: var(--card-bg);
    stroke-width: 1.6;
    cursor: pointer;
    transition: fill 0.25s ease, stroke 0.15s ease;
}

.uf:hover[b-wjjeir1wjn] { stroke: var(--text-main); stroke-width: 2; }

.uf.selecionada[b-wjjeir1wjn] {
    stroke: var(--sinal);
    stroke-width: 2.4;
}

.escala[b-wjjeir1wjn] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 0.9rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--border);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.64rem;
    color: var(--text-fraco);
}

.escala i[b-wjjeir1wjn] { width: 30px; height: 10px; border-radius: 2px; }
.escala span:first-child[b-wjjeir1wjn] { margin-right: 0.35rem; }
.escala span:last-child[b-wjjeir1wjn] { margin-left: 0.35rem; }

/* ── Ranking de estados ── */
.ranking[b-wjjeir1wjn] { list-style: none; margin: 0; padding: 0; max-height: 62vh; overflow-y: auto; }

.linha[b-wjjeir1wjn] {
    display: grid;
    grid-template-columns: 2.1rem minmax(0, 1fr) 3.5rem auto;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.42rem 0.3rem;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s;
}

.linha:hover[b-wjjeir1wjn] { background: rgba(255, 255, 255, 0.028); }

.linha-sigla[b-wjjeir1wjn] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--sinal);
}

.linha-nome[b-wjjeir1wjn] {
    font-size: 0.8rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.linha-trilho[b-wjjeir1wjn] {
    height: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 3px;
    overflow: hidden;
}

.linha-trilho i[b-wjjeir1wjn] {
    display: block;
    height: 100%;
    background: var(--serie);
    border-radius: 3px;
}

.linha-valor[b-wjjeir1wjn] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-main);
    text-align: right;
    min-width: 4.2rem;
}

/* ── Recorte de um estado ── */
.voltar[b-wjjeir1wjn] { margin-bottom: 1rem; font-size: 0.78rem; }

.resumo[b-wjjeir1wjn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin: 0 0 1.25rem;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.resumo > div[b-wjjeir1wjn] {
    background: var(--card-bg);
    padding: 0.6rem 0.75rem;
}

.resumo dt[b-wjjeir1wjn] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-fraco);
    font-weight: 600;
}

.resumo dd[b-wjjeir1wjn] {
    margin: 0.2rem 0 0;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-main);
}

.titulo-secao[b-wjjeir1wjn] {
    margin: 0 0 0.6rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.64rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--text-fraco);
}

.mini-barras[b-wjjeir1wjn] { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }

.mini-barras li[b-wjjeir1wjn] {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr) 3.2rem;
    align-items: center;
    gap: 0.55rem;
}

.mini-rotulo[b-wjjeir1wjn] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.mini-trilho[b-wjjeir1wjn] {
    height: 7px;
    background: rgba(255, 255, 255, 0.035);
    border-radius: 3px;
    overflow: hidden;
}

.mini-trilho i[b-wjjeir1wjn] { display: block; height: 100%; background: var(--serie); border-radius: 3px; }

.mini-valor[b-wjjeir1wjn] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-fraco);
    text-align: right;
}

/* ── Mapa por município ── */
.bloco[b-wjjeir1wjn] {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
    gap: 1rem;
    align-items: start;
    padding-bottom: 3rem;
}

@media (max-width: 1000px) {
    .bloco[b-wjjeir1wjn] { grid-template-columns: 1fr; }
}

.camada-municipios .mun[b-wjjeir1wjn] {
    stroke: none;
    transition: fill 0.3s ease;
}

/* Divisas por cima do preenchimento. Só estas capturam clique: 27 alvos em
   vez de 5.570 mantêm o render leve mesmo com o país inteiro pintado. */
.camada-uf .contorno[b-wjjeir1wjn] {
    fill: transparent;
    stroke: rgba(255, 255, 255, 0.22);
    stroke-width: 1.1;
    cursor: pointer;
    transition: stroke 0.15s, stroke-width 0.15s;
}

.camada-uf .contorno:hover[b-wjjeir1wjn] {
    stroke: var(--text-main);
    stroke-width: 2;
}

.camada-uf .contorno.ativo[b-wjjeir1wjn] {
    stroke: var(--sinal);
    stroke-width: 2;
}

.escala-nota[b-wjjeir1wjn] { margin-left: auto; opacity: 0.75; }

/* ── Painel de filtros ── */
.painel-filtros[b-wjjeir1wjn] { position: sticky; top: 1rem; }

.aviso[b-wjjeir1wjn] {
    margin-bottom: 1.1rem;
    padding: 0.7rem 0.85rem;
    background: rgba(255, 255, 255, 0.022);
    border: 1px solid var(--border);
    border-left: 2px solid var(--sinal);
    border-radius: 7px;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.aviso strong[b-wjjeir1wjn] { color: var(--text-main); }









/* ── Resultado ── */
.resultado[b-wjjeir1wjn] {
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.resultado-linha[b-wjjeir1wjn] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.3rem 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.resultado-linha b[b-wjjeir1wjn] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    color: var(--sinal);
}

.top[b-wjjeir1wjn] { list-style: none; margin: 0.6rem 0 0; padding: 0; }

.top-linha[b-wjjeir1wjn] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3.5rem auto;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.35rem 0.2rem;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    text-align: left;
    transition: background-color 0.14s;
}

.top-linha:hover[b-wjjeir1wjn] { background: rgba(255, 255, 255, 0.028); }

.top-nome[b-wjjeir1wjn] {
    font-size: 0.78rem;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-nome small[b-wjjeir1wjn] {
    margin-left: 0.4rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    color: var(--text-fraco);
}

.top-trilho[b-wjjeir1wjn] {
    height: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 3px;
    overflow: hidden;
}

.top-trilho i[b-wjjeir1wjn] { display: block; height: 100%; background: var(--serie); border-radius: 3px; }

.top-valor[b-wjjeir1wjn] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    text-align: right;
    min-width: 3.8rem;
}

.destaque .ind-valor[b-wjjeir1wjn] { color: var(--sinal); }

/* Com um estado aberto os municípios ficam grandes o bastante para virar alvo. */
.camada-municipios .mun-alvo[b-wjjeir1wjn] { cursor: pointer; }
.camada-municipios .mun-alvo:hover[b-wjjeir1wjn] { stroke: var(--text-main); stroke-width: 0.8; }

/* ── Cabeçalho enxuto ── */
.resumo-escopo[b-wjjeir1wjn] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.resumo-escopo b[b-wjjeir1wjn] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    color: var(--text-main);
    font-weight: 600;
}

.resumo-escopo b.destaque[b-wjjeir1wjn] { color: var(--sinal); }

/* ── Mapa por estado ── */
.uf[b-wjjeir1wjn] {
    stroke: var(--card-bg);
    stroke-width: 1.2;
    cursor: pointer;
    transition: fill 0.25s ease, stroke 0.15s ease;
}

.uf:hover[b-wjjeir1wjn] { stroke: var(--text-main); stroke-width: 1.8; }
.uf.ativa[b-wjjeir1wjn] { stroke: var(--sinal); stroke-width: 2.2; }
.uf.fora[b-wjjeir1wjn] { cursor: pointer; }

/* O município é fundo, e só. Inerte ao ponteiro: nenhum realce, nenhum clique,
   nenhuma disputa com os pontos, que são o que o cursor está inspecionando.
   Como consequência, clicar no mapa não abre mais o painel da cidade — esse
   caminho segue pelo ranking e por "Navegar por cidade". */
.mun[b-wjjeir1wjn] {
    fill: var(--sinal);
    stroke: var(--tinta-sobre-sinal);
    stroke-width: 0.6;
    pointer-events: none;
}

/* Sem realce nenhum ao passar o mouse. Primeiro era fill branco, que cobria os
   pontos; depois contorno branco, que ficava com cara de sublinhado sobre a
   divisa. Em ambos o município disputava atenção com o que o cursor está de
   fato inspecionando, que são os pontos. O cursor em pointer já basta como
   aviso de que a cidade é clicável. */

.marca-mun[b-wjjeir1wjn] {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: var(--sinal);
    display: inline-block;
}

/* ── Busca de municípios ── */
.busca-cidade[b-wjjeir1wjn] { position: relative; margin-bottom: 0.7rem; }

.conta-sel[b-wjjeir1wjn] {
    position: absolute;
    right: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--sinal);
    color: var(--tinta-sobre-sinal);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.6rem;
    font-weight: 600;
}

.fichas[b-wjjeir1wjn] { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 0.6rem; }

.ficha[b-wjjeir1wjn] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--sinal-fraco);
    border: 1px solid color-mix(in oklab, var(--sinal) 35%, transparent);
    border-radius: 5px;
    padding: 0.22rem 0.45rem;
    font-size: 0.72rem;
    color: var(--text-main);
    cursor: pointer;
}

.ficha small[b-wjjeir1wjn] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.6rem;
    color: var(--text-fraco);
}

.ficha .x[b-wjjeir1wjn] { color: var(--text-fraco); font-size: 0.85rem; line-height: 1; }
.ficha:hover .x[b-wjjeir1wjn] { color: var(--sinal); }

.nota-limite[b-wjjeir1wjn] {
    margin: 0 0 0.8rem;
    font-size: 0.71rem;
    line-height: 1.45;
    color: var(--text-fraco);
    padding-left: 0.6rem;
    border-left: 2px solid var(--borda-forte);
}

.sugestoes[b-wjjeir1wjn] { list-style: none; margin: 0 0 0.9rem; padding: 0; }

.sugestoes li button[b-wjjeir1wjn] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6rem;
    width: 100%;
    padding: 0.35rem 0.3rem;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.78rem;
    cursor: pointer;
    text-align: left;
}

.sugestoes li button:hover[b-wjjeir1wjn] { background: rgba(255, 255, 255, 0.03); color: var(--text-main); }

.sugestoes small[b-wjjeir1wjn] {
    margin-left: 0.4rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    color: var(--text-fraco);
}

.sugestoes b[b-wjjeir1wjn] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    color: var(--text-fraco);
    font-variant-numeric: tabular-nums;
}

.sugestoes .nada[b-wjjeir1wjn] { padding: 0.5rem 0.3rem; font-size: 0.76rem; color: var(--text-fraco); }

/* ── Ranking ── */
.painel-largo[b-wjjeir1wjn] { margin-bottom: 3rem; }

.top[b-wjjeir1wjn] { list-style: none; margin: 0; padding: 0; }

.top-linha[b-wjjeir1wjn] {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) minmax(60px, 3fr) 4.2rem 3.4rem;
    align-items: center;
    gap: 0.7rem;
    padding: 0.32rem 0;
    border-bottom: 1px solid var(--border);
}

.fixar[b-wjjeir1wjn] {
    width: 1.5rem;
    height: 1.5rem;
    display: grid;
    place-items: center;
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-fraco);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
}

.fixar:hover[b-wjjeir1wjn] { color: var(--sinal); border-color: var(--sinal); }
.fixar.fixado[b-wjjeir1wjn] { background: var(--sinal); border-color: var(--sinal); color: var(--tinta-sobre-sinal); }

.top-nome[b-wjjeir1wjn] {
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    font-size: 0.82rem;
    color: var(--text-main);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-nome:hover[b-wjjeir1wjn] { color: var(--sinal); }

.top-nome small[b-wjjeir1wjn] {
    margin-left: 0.4rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    color: var(--text-fraco);
}

.top-trilho[b-wjjeir1wjn] { height: 7px; background: rgba(255,255,255,0.04); border-radius: 3px; overflow: hidden; }
.top-trilho i[b-wjjeir1wjn] { display: block; height: 100%; background: var(--serie); border-radius: 3px; }

.top-valor[b-wjjeir1wjn], .top-pct[b-wjjeir1wjn] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.top-valor[b-wjjeir1wjn] { color: var(--text-main); }
.top-pct[b-wjjeir1wjn] { color: var(--text-fraco); }

/* ── Barra de filtros ──
   Uma linha acima dos gráficos, como manda a prática de dashboard: o recorte
   fica visível e ao alcance sem competir com o conteúdo. */
.barra-filtros[b-wjjeir1wjn] {
    display: grid;
    /* Seis facetas de largura igual e o botão do tamanho do texto. O molde
       anterior tinha cinco colunas, de quando havia quatro facetas: as duas
       que entraram depois caíam na coluna "auto", reservada ao botão, e
       apareciam mais estreitas que as vizinhas. */
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1.1rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--border);
}

/* Abaixo disso seis colunas ficam estreitas demais para o rótulo caber ao
   lado do valor; duas linhas de três mantêm as caixas iguais. */
@media (max-width: 1280px) {
    .barra-filtros[b-wjjeir1wjn] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .barra-filtros[b-wjjeir1wjn] { grid-template-columns: 1fr 1fr; }
}

.limpar-tudo[b-wjjeir1wjn] { font-size: 0.76rem; white-space: nowrap; }

.bloco[b-wjjeir1wjn] { grid-template-columns: 1fr; }

.aviso-linha[b-wjjeir1wjn] {
    margin: 0.9rem 0 0;
    padding-top: 0.8rem;
    border-top: 1px solid var(--border);
    font-size: 0.73rem;
    line-height: 1.5;
    color: var(--text-fraco);
}

.aviso-linha strong[b-wjjeir1wjn] { color: var(--text-muted); }

/* ── Barra de filtros fixa ──
   Acompanha a rolagem: com o mapa e o ranking longos, o recorte precisa ficar
   sempre ao alcance e sempre visível. */
.barra-filtros[b-wjjeir1wjn] {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--bg-page);
    padding-top: 0.9rem;
}

/* ── Moldura do mapa e controles de zoom ── */
.moldura-mapa[b-wjjeir1wjn] { position: relative; }

.zoom[b-wjjeir1wjn] {
    position: absolute;
    right: 0.6rem;
    top: 0.6rem;
    display: grid;
    gap: 3px;
}

.zoom button[b-wjjeir1wjn] {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.14s, border-color 0.14s, background-color 0.14s;
}

.zoom button:hover[b-wjjeir1wjn] {
    color: var(--sinal);
    border-color: var(--sinal);
    background: var(--elevado, #151a24);
}

.zoom .reajustar[b-wjjeir1wjn] { font-size: 0.8rem; }

/* Contorno de estado sem preenchimento, usado como referência geográfica
   enquanto os municípios estão em destaque. Inerte ao ponteiro para não
   roubar o clique dos municípios nem trocar o recorte por acidente. */
.uf-contorno[b-wjjeir1wjn] {
    fill: none;
    stroke: rgba(255, 255, 255, 0.16);
    stroke-width: 0.7;
    pointer-events: none;
    vector-effect: non-scaling-stroke;
}

.mapa[b-wjjeir1wjn] { cursor: grab; touch-action: none; }
.mapa.arrastando[b-wjjeir1wjn] { cursor: grabbing; }

/* O traço não engorda com o zoom — sem isto, ampliar 20x transforma a divisa
   num borrão que cobre o município. */
.uf[b-wjjeir1wjn], .uf-contorno[b-wjjeir1wjn], .mun[b-wjjeir1wjn] { vector-effect: non-scaling-stroke; }

/* ── Divisão: mapa à esquerda, análise à direita ── */
.bloco[b-wjjeir1wjn] {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(330px, 0.95fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 1080px) {
    .bloco[b-wjjeir1wjn] { grid-template-columns: 1fr; }
}

.coluna-analise[b-wjjeir1wjn] { display: grid; gap: 1rem; }

.mapa[b-wjjeir1wjn] { max-height: none; aspect-ratio: 1 / 1; }

/* ── Cartão do público ── */
.cartao-alvo[b-wjjeir1wjn] { padding: 1.1rem 1.25rem; }

.alvo-rotulo[b-wjjeir1wjn] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-fraco);
}

.alvo-corpo[b-wjjeir1wjn] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 0.8rem;
}

/* A figura preenche de baixo para cima na proporção do público: o percentual
   vira forma, não só número. */
.figura[b-wjjeir1wjn] { width: 46px; height: auto; flex: none; }
.figura-base[b-wjjeir1wjn] { fill: rgba(255, 255, 255, 0.09); }
.figura-cheia[b-wjjeir1wjn] { fill: var(--sinal); }

.alvo-numeros[b-wjjeir1wjn] { display: grid; gap: 0.15rem; min-width: 0; }

.alvo-pct[b-wjjeir1wjn] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 2.1rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--sinal);
    font-variant-numeric: tabular-nums;
}

.alvo-abs[b-wjjeir1wjn] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.86rem;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}

.alvo-nota[b-wjjeir1wjn] { font-size: 0.72rem; color: var(--text-fraco); }

/* ── Barras dos painéis laterais ── */
.barras-mini[b-wjjeir1wjn] { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.22rem; }

.barras-mini li[b-wjjeir1wjn] {
    display: grid;
    grid-template-columns: 3.1rem minmax(0, 1fr) 3.1rem;
    align-items: center;
    gap: 0.55rem;
    padding: 0.1rem 0.25rem;
    border-radius: 4px;
}

/* Item que está selecionado no filtro: o gráfico e o recorte falam a mesma
   língua, sem precisar olhar o dropdown para lembrar o que foi marcado. */
.barras-mini li.marcado[b-wjjeir1wjn] { background: var(--sinal-fraco); }

.mini-rot[b-wjjeir1wjn] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.67rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.barras-mini li.marcado .mini-rot[b-wjjeir1wjn] { color: var(--sinal); font-weight: 600; }

.mini-trilho[b-wjjeir1wjn] {
    height: 8px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    overflow: hidden;
}

.mini-trilho i[b-wjjeir1wjn] { display: block; height: 100%; background: var(--serie); border-radius: 4px; }

.mini-pct[b-wjjeir1wjn] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.67rem;
    color: var(--text-fraco);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── Rosca de gênero ── */
.genero[b-wjjeir1wjn] { display: flex; align-items: center; gap: 1.5rem; }

.rosca[b-wjjeir1wjn] { width: 108px; height: 108px; flex: none; transform: rotate(-90deg); }
.rosca circle[b-wjjeir1wjn] { fill: none; stroke-width: 4.5; }
.anel-fundo[b-wjjeir1wjn] { stroke: rgba(255, 255, 255, 0.05); }
/* ── Gênero ──
   Azul para homens, rosa para mulheres: é a leitura que o público já traz
   pronta, e num gráfico de duas fatias a convenção vale mais que a novidade.
   Os dois tons foram medidos, não copiados: o azul é um degrau da rampa do
   mapa e o rosa foi posicionado na mesma faixa de luminosidade, o que dá
   ΔE 10,0 sob protanopia e 4,3:1 de contraste sobre o cartão. */
.anel-h[b-wjjeir1wjn] { stroke: #4690CC; }
.anel-m[b-wjjeir1wjn] { stroke: #E15E8E; }

.legenda-genero[b-wjjeir1wjn] { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

.legenda-genero li[b-wjjeir1wjn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.legenda-genero i[b-wjjeir1wjn] { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.legenda-genero .marca-h[b-wjjeir1wjn] { background: #4690CC; }
.legenda-genero .marca-m[b-wjjeir1wjn] { background: #E15E8E; }

.legenda-genero b[b-wjjeir1wjn] {
    margin-left: auto;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    color: var(--text-main);
}

/* ── Mapa menor: metade da largura e altura contida ── */
.bloco[b-wjjeir1wjn] { grid-template-columns: minmax(0, 0.95fr) minmax(340px, 1.05fr); }
.mapa[b-wjjeir1wjn] { aspect-ratio: auto; max-height: 46vh; }
.painel-mapa[b-wjjeir1wjn] { position: sticky; top: 5.2rem; }

.nota-inventario[b-wjjeir1wjn] {
    margin: -0.4rem 0 1rem;
    padding: 0.5rem 0.7rem;
    background: var(--sinal-fraco);
    border-left: 2px solid var(--sinal);
    border-radius: 5px;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Painel retrátil ── */
.dobra[b-wjjeir1wjn] { padding: 0; overflow: hidden; }

.dobra-topo[b-wjjeir1wjn] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.9rem 1.15rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s;
}

.dobra-topo:hover[b-wjjeir1wjn] { background: rgba(255, 255, 255, 0.028); }

.dobra-titulo[b-wjjeir1wjn] {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--text-main);
}

.dobra-resumo[b-wjjeir1wjn] {
    margin-left: auto;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.75rem;
    color: var(--sinal);
    font-variant-numeric: tabular-nums;
}

.dobra-seta[b-wjjeir1wjn] { color: var(--text-fraco); font-size: 0.65rem; }
.dobra.aberta .dobra-seta[b-wjjeir1wjn] { color: var(--sinal); }

.dobra-corpo[b-wjjeir1wjn] {
    padding: 0 1.15rem 1.15rem;
    border-top: 1px solid var(--border);
    padding-top: 0.9rem;
    animation: abrirDobra-b-wjjeir1wjn 0.2s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes abrirDobra-b-wjjeir1wjn {
    from { opacity: 0; transform: translateY(-5px); }
}

.sub[b-wjjeir1wjn] {
    margin: 0 0 0.5rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.61rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--text-fraco);
}

/* Respiro entre um grupo e o título do próximo, com um fio no meio do vão.
   O espaço sozinho já separava; o fio confirma que ali começa outra lista, e
   é a mesma cor de borda dos painéis, então não pesa. */
.barras-mini + .sub[b-wjjeir1wjn] {
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.mini-rot.largo[b-wjjeir1wjn] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.barras-mini li:has(.mini-rot.largo)[b-wjjeir1wjn] { grid-template-columns: 8.5rem minmax(0, 1fr) 3rem; }

.rodape-dobra[b-wjjeir1wjn] {
    margin: 0.9rem 0 0;
    padding-top: 0.7rem;
    border-top: 1px solid var(--border);
    font-size: 0.72rem;
    color: var(--text-fraco);
    font-variant-numeric: tabular-nums;
}

.vazio-dobra[b-wjjeir1wjn] { margin: 0; font-size: 0.78rem; color: var(--text-fraco); }

/* ==========================================================================
   Acabamento final. Estas regras vêm por último de propósito: sobrescrevem
   tentativas anteriores sem precisar caçá-las no meio do arquivo.
   ========================================================================== */

/* O mapa NÃO é fixo. Com a barra de filtros já fixa, dois elementos grudados
   competindo faziam o mapa deslizar sozinho pela página. */
.painel-mapa[b-wjjeir1wjn] {
    position: static;
    display: flex;
    flex-direction: column;
}

/* Barra de filtros: destacada como faixa própria, com desfoque atrás para o
   conteúdo passar por baixo sem embolar. */
.barra-filtros[b-wjjeir1wjn] {
    top: -1px;
    padding: 0.85rem 0;
    margin-bottom: 1.25rem;
    background: color-mix(in oklab, var(--bg-page) 88%, transparent);
    backdrop-filter: blur(10px) saturate(1.2);
    border-bottom: 1px solid var(--border);
}

/* ── Ritmo vertical ── */
.cabecalho[b-wjjeir1wjn] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 0.25rem 0 1rem;
    border-bottom: none;
    margin-bottom: 0;
}

.indicadores[b-wjjeir1wjn] {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
    margin-bottom: 1rem;
}

.indicador[b-wjjeir1wjn] { transition: background-color 0.18s; }
.indicador:hover[b-wjjeir1wjn] { background: var(--card-bg); }

/* O indicador do público ganha o fio amarelo — é a leitura principal da tela. */
.indicador.destaque[b-wjjeir1wjn] { position: relative; }

.indicador.destaque[b-wjjeir1wjn]::before {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--sinal), transparent 70%);
}

.indicador.destaque .ind-valor[b-wjjeir1wjn] { color: var(--sinal); }

/* ── Mapa ── */
.moldura-mapa[b-wjjeir1wjn] {
    flex: 1;
    min-height: 0;
    border-radius: 8px;
    overflow: hidden;
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, 0.022), transparent 70%),
        var(--preto);
    border: 1px solid var(--border);
}

.mapa[b-wjjeir1wjn] { max-height: 52vh; width: 100%; display: block; }

.uf[b-wjjeir1wjn] { stroke: var(--preto); }

/* ── Painéis: um respiro comum ── */
.painel[b-wjjeir1wjn] { transition: border-color 0.2s; }
.painel:hover[b-wjjeir1wjn] { border-color: color-mix(in oklab, var(--sinal) 10%, var(--border)); }

.painel-topo h2[b-wjjeir1wjn] { font-size: 0.92rem; }

/* ── Ranking ── */
.painel-largo[b-wjjeir1wjn] { margin-top: 1rem; }

/* ── Ajuda ── */
.ajuda-topo[b-wjjeir1wjn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.botao-info[b-wjjeir1wjn] {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text-fraco);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.82rem;
    font-style: italic;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.botao-info:hover[b-wjjeir1wjn], .botao-info.ativo[b-wjjeir1wjn] { color: var(--sinal); border-color: var(--sinal); }

.guia[b-wjjeir1wjn] {
    margin: 0 0 1.25rem;
    padding: 1.1rem 1.25rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 2px solid var(--sinal);
    border-radius: 10px;
    animation: abrirGuia-b-wjjeir1wjn 0.24s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes abrirGuia-b-wjjeir1wjn { from { opacity: 0; transform: translateY(-6px); } }

.guia h3[b-wjjeir1wjn] {
    margin: 0 0 0.8rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
}

.guia-grade[b-wjjeir1wjn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem 1.5rem;
}

.guia-item[b-wjjeir1wjn] {
    display: grid;
    gap: 0.3rem;
    padding-left: 0.75rem;
    border-left: 1px solid var(--border);
}

.guia-item b[b-wjjeir1wjn] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.63rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sinal);
}

.guia-item span[b-wjjeir1wjn] {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.guia-formula[b-wjjeir1wjn] {
    margin: 1rem 0 0;
    padding: 0.7rem 0.9rem;
    background: var(--bg-page);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.71rem;
    line-height: 1.6;
    color: var(--text-muted);
    white-space: pre-wrap;
}

.guia-formula em[b-wjjeir1wjn] { color: var(--text-main); font-style: normal; }

/* ==========================================================================
   PAINEL DE ALTURA FIXA
   --------------------------------------------------------------------------
   A tela toda cabe numa janela. Nada de rolagem da página: o que precisa de
   mais espaço rola por dentro do próprio painel.

   É isto que faz um painel parecer painel — enquanto a página rolava, o mapa
   e os filtros pareciam "andar" mesmo estando parados.
   ========================================================================== */
.painel-visao[b-wjjeir1wjn] {
    height: calc(100vh - 4rem);   /* desconta o padding vertical do .content */
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 0;
}

/* Nada aqui gruda: com altura fixa, sticky é desnecessário e foi o que fazia
   os elementos deslizarem uns sobre os outros. */
.barra-filtros[b-wjjeir1wjn] {
    position: static;
    backdrop-filter: none;
    background: transparent;
    flex: none;
    padding: 0 0 0.9rem;
    margin-bottom: 0.9rem;
}

.painel-visao > .cabecalho[b-wjjeir1wjn],
.painel-visao > .indicadores[b-wjjeir1wjn],
.painel-visao > .guia[b-wjjeir1wjn],
.painel-visao > .nota-inventario[b-wjjeir1wjn] { flex: none; }

.painel-visao > .indicadores[b-wjjeir1wjn] { margin-bottom: 0.9rem; }

/* A área principal ocupa a altura que sobrar. */
.painel-visao > .bloco[b-wjjeir1wjn] {
    flex: 1;
    min-height: 0;
    align-items: stretch;
}

/* ── Coluna do mapa ── */
.painel-mapa[b-wjjeir1wjn] {
    position: static;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.painel-mapa .painel-topo[b-wjjeir1wjn] { flex: none; }

.moldura-mapa[b-wjjeir1wjn] {
    flex: 1;
    min-height: 0;
    display: flex;
}

.mapa[b-wjjeir1wjn] {
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
}

/* ── Coluna de análise: rola por dentro ── */
.coluna-analise[b-wjjeir1wjn] {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    align-content: start;
}

/* Cabeçalho de painel fixo enquanto o conteúdo do painel rola — aqui o sticky
   faz sentido, porque o contêiner é que rola, não a página. */
.coluna-analise .painel[b-wjjeir1wjn] { flex: none; }

/* ── Fora do painel: telas baixas ou estreitas voltam a rolar normalmente ── */
@media (max-width: 1080px), (max-height: 620px) {
    .painel-visao[b-wjjeir1wjn] { height: auto; display: block; }
    .painel-visao > .bloco[b-wjjeir1wjn] { display: grid; }
    .coluna-analise[b-wjjeir1wjn] { overflow: visible; }
    .mapa[b-wjjeir1wjn] { height: auto; max-height: 60vh; }
}

/* ==========================================================================
   LAYOUT FINAL — página rola por inteiro, filtros acompanham
   --------------------------------------------------------------------------
   A tentativa de painel de altura fixa criava rolagem dentro dos gráficos, o
   que é pior: o usuário perde a noção de quanto conteúdo existe e o gesto de
   rolar muda de significado conforme onde o ponteiro está.

   Agora rola a página inteira. Só a barra de filtros acompanha — e ela é o
   ÚNICO elemento grudado, que era a origem do efeito de "andar": dois
   elementos sticky disputando o topo deslizam um sobre o outro.
   ========================================================================== */
.painel-visao[b-wjjeir1wjn] {
    height: auto;
    display: block;
    min-height: 0;
    padding-bottom: 3.5rem;
}

.barra-filtros[b-wjjeir1wjn] {
    position: sticky;
    top: -1px;
    z-index: 40;
    display: grid;
    padding: 0.9rem 0;
    margin-bottom: 1.1rem;
    background: color-mix(in oklab, var(--bg-page) 92%, transparent);
    backdrop-filter: blur(12px) saturate(1.3);
    border-bottom: 1px solid var(--border);
}

/* Sombra sutil só quando há conteúdo passando por baixo, para a faixa se
   destacar sem parecer uma caixa solta. */
.barra-filtros[b-wjjeir1wjn]::after {
    content: '';
    position: absolute;
    inset: 100% 0 auto 0;
    height: 12px;
    background: linear-gradient(var(--bg-page), transparent);
    pointer-events: none;
}

/* ── Faixa superior: mapa + leitura principal ── */
.bloco[b-wjjeir1wjn] {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(290px, 0.6fr);
    gap: 1rem;
    align-items: stretch;
}

.painel-mapa[b-wjjeir1wjn] { display: flex; flex-direction: column; }

.moldura-mapa[b-wjjeir1wjn] { flex: 1; min-height: 320px; }

.mapa[b-wjjeir1wjn] {
    width: 100%;
    height: 100%;
    max-height: 58vh;
    aspect-ratio: auto;
}

.coluna-analise[b-wjjeir1wjn] {
    display: grid;
    gap: 1rem;
    align-content: start;
    overflow: visible;
    max-height: none;
}

/* ── Grade de gráficos abaixo do mapa ── */
.grade-graficos[b-wjjeir1wjn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    align-items: start;
}

/* O ranking é uma lista longa: ocupa a linha inteira, senão fica espremido
   numa coluna de 310px com o nome do município cortado. */
.grade-graficos > .painel:last-child[b-wjjeir1wjn] { grid-column: 1 / -1; }

.grade-graficos .barras-mini[b-wjjeir1wjn] { gap: 0.28rem; }

/* Sem rolagem interna em nenhum painel. */
.ranking[b-wjjeir1wjn], .rolagem-mapa[b-wjjeir1wjn], .coluna-analise[b-wjjeir1wjn] { max-height: none; }

@media (max-width: 1000px) {
    .bloco[b-wjjeir1wjn] { grid-template-columns: 1fr; }
    .mapa[b-wjjeir1wjn] { max-height: 52vh; }
}

/* ==========================================================================
   COMPOSIÇÃO — grade de áreas nomeadas
   --------------------------------------------------------------------------
   Grade de 12 colunas com áreas explícitas, em vez de auto-fit. Auto-fit
   distribui painéis de alturas diferentes e deixa buracos; com áreas, cada
   painel tem lugar e tamanho definidos e o conjunto fecha num retângulo —
   que é o que torna a tela apresentável num print.
   ========================================================================== */
.grade[b-wjjeir1wjn] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto minmax(200px, auto) auto auto;
    gap: 0.85rem;
    grid-template-areas:
        "mapa mapa mapa mapa mapa mapa mapa alvo  alvo  alvo  alvo  alvo"
        "mapa mapa mapa mapa mapa mapa mapa gen   gen   gen   gen   gen"
        "idade idade idade idade cls cls cls cls inv inv inv inv"
        "rank rank rank rank rank rank rank rank rank rank rank rank";
}

.a-mapa[b-wjjeir1wjn]   { grid-area: mapa; }
.a-alvo[b-wjjeir1wjn]   { grid-area: alvo; }
.a-genero[b-wjjeir1wjn] { grid-area: gen; }
.a-classe[b-wjjeir1wjn] { grid-area: cls; }
.a-idade[b-wjjeir1wjn]  { grid-area: idade; }
.a-inv[b-wjjeir1wjn]    { grid-area: inv; }
.a-rank[b-wjjeir1wjn]   { grid-area: rank; }

/* O mapa ocupa duas linhas e preenche a altura que elas somam. */
.a-mapa[b-wjjeir1wjn] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.a-mapa .moldura-mapa[b-wjjeir1wjn] { flex: 1; min-height: 300px; }
.mapa[b-wjjeir1wjn] { width: 100%; height: 100%; max-height: none; }

/* Painéis da linha de gráficos crescem juntos: alturas iguais eliminam o
   serrilhado que aparecia quando cada um tinha o seu tamanho. */
.a-idade[b-wjjeir1wjn], .a-cls[b-wjjeir1wjn], .a-classe[b-wjjeir1wjn], .a-inv[b-wjjeir1wjn] { align-self: stretch; }

.a-genero[b-wjjeir1wjn] { display: flex; flex-direction: column; justify-content: center; }
.a-genero .genero[b-wjjeir1wjn] { justify-content: space-around; }

/* ── Densidade: mais linha visível por painel, menos rolagem ── */
.barras-mini li[b-wjjeir1wjn] { padding: 0.06rem 0.25rem; }
.mini-trilho[b-wjjeir1wjn] { height: 7px; }

.a-idade .barras-mini li[b-wjjeir1wjn] { grid-template-columns: 2.9rem minmax(0, 1fr) 2.9rem; }

.painel-topo[b-wjjeir1wjn] { margin-bottom: 0.8rem; }
.painel[b-wjjeir1wjn] { padding: 0.95rem 1.05rem 1.1rem; }

/* ── Ranking em largura total: cabem nome, barra e os dois números ── */
.a-rank .top-linha[b-wjjeir1wjn] {
    grid-template-columns: 1.5rem minmax(150px, 2fr) minmax(0, 6fr) 4.5rem 3.6rem;
}

/* ── Telas menores: uma coluna, ordem de leitura preservada ── */
@media (max-width: 1200px) {
    .grade[b-wjjeir1wjn] {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-areas:
            "mapa mapa mapa mapa alvo alvo"
            "mapa mapa mapa mapa gen  gen"
            "idade idade cls cls inv inv"
            "rank rank rank rank rank rank";
    }
}

@media (max-width: 820px) {
    .grade[b-wjjeir1wjn] {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-template-areas:
            "mapa" "alvo" "gen" "idade" "cls" "inv" "rank";
    }
    .a-mapa .moldura-mapa[b-wjjeir1wjn] { min-height: 320px; }
}

/* ==========================================================================
   COMPOSIÇÃO ANALÍTICA
   --------------------------------------------------------------------------
   Quem abre esta tela quer saber, nesta ordem: qual o tamanho do universo,
   QUEM é esse público, e ONDE está o inventário. O mapa é contexto — situa,
   mas não responde nenhuma dessas perguntas.

   Por isso a primeira dobra traz mapa e perfil lado a lado, em altura
   contida, e não o mapa sozinho ocupando a tela inteira. Rolando, vem o
   inventário e depois o ranking: o raciocínio continua na mesma direção,
   do "quem" para o "onde" e daí para o "quanto".
   ========================================================================== */
.grade[b-wjjeir1wjn] {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "mapa mapa mapa mapa mapa idade idade idade cls cls cls cls"
        "mapa mapa mapa mapa mapa idade idade idade gen gen gen gen"
        "inv  inv  inv  inv  inv  inv   rank  rank rank rank rank rank";
}

/* Altura da primeira dobra: o mapa e o perfil etário ocupam as duas linhas,
   classe e gênero dividem a coluna da direita. Nenhum deles cresce sozinho. */
.a-mapa[b-wjjeir1wjn]   { grid-row: 1 / 3; }
.a-idade[b-wjjeir1wjn]  { grid-row: 1 / 3; }
.a-classe[b-wjjeir1wjn] { grid-row: 1 / 2; }
.a-genero[b-wjjeir1wjn] { grid-row: 2 / 3; }

.a-mapa .moldura-mapa[b-wjjeir1wjn] { min-height: 0; }
.mapa[b-wjjeir1wjn] { max-height: none; height: 100%; min-height: 260px; }

/* ── Indicador com a figura embutida ──
   O cartão gigante do público saiu: ele repetia o número que já está aqui,
   ocupando um painel inteiro para dizer o mesmo. */
.indicador.com-figura[b-wjjeir1wjn] {
    flex-direction: row;
    align-items: center;
    gap: 0.85rem;
}

.indicador.com-figura > div[b-wjjeir1wjn] { display: grid; gap: 0.12rem; min-width: 0; }
.indicador.com-figura .figura[b-wjjeir1wjn] { width: 26px; height: auto; flex: none; }

.figura-base[b-wjjeir1wjn] { fill: rgba(255, 255, 255, 0.1); }
.figura-cheia[b-wjjeir1wjn] { fill: var(--sinal); }

/* ── Perfil etário: 17 faixas precisam caber sem rolagem ── */
.a-idade .barras-mini[b-wjjeir1wjn] { gap: 0.14rem; }
.a-idade .barras-mini li[b-wjjeir1wjn] { padding: 0; }
.a-idade .mini-trilho[b-wjjeir1wjn] { height: 8px; }

/* ── Gênero: rosca menor, para dividir a coluna com a classe social ── */
.a-genero .rosca[b-wjjeir1wjn] { width: 84px; height: 84px; }
.a-genero .genero[b-wjjeir1wjn] { gap: 1rem; }

/* ── Inventário e ranking na segunda dobra ── */
.a-inv .barras-mini li[b-wjjeir1wjn] { grid-template-columns: 8rem minmax(0, 1fr) 3rem; }
.a-rank .top-linha[b-wjjeir1wjn] { grid-template-columns: 1.5rem minmax(140px, 2fr) minmax(0, 5fr) 4.4rem 3.4rem; }

@media (max-width: 1200px) {
    .grade[b-wjjeir1wjn] {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-areas:
            "mapa mapa mapa idade idade idade"
            "cls  cls  cls  gen   gen   gen"
            "inv  inv  inv  rank  rank  rank";
    }
    .a-mapa[b-wjjeir1wjn], .a-idade[b-wjjeir1wjn] { grid-row: auto; }
    .a-classe[b-wjjeir1wjn], .a-genero[b-wjjeir1wjn] { grid-row: auto; }
    .mapa[b-wjjeir1wjn] { min-height: 300px; }
}

@media (max-width: 820px) {
    .grade[b-wjjeir1wjn] {
        grid-template-columns: 1fr;
        grid-template-areas: "mapa" "idade" "cls" "gen" "inv" "rank";
    }
}

/* ==========================================================================
   AJUSTE DE COMPOSIÇÃO
   --------------------------------------------------------------------------
   Painéis passam a ter a altura do próprio conteúdo. Antes eu mandava todos
   preencherem a linha, o que criava caixas com metade de vazio — o gênero era
   o caso pior, uma rosca pequena dentro de um painel enorme.

   Coluna do meio: perfil etário e, abaixo dele, gênero.
   Coluna da direita: classe social e, abaixo, nível de instrução.
   ========================================================================== */
.grade[b-wjjeir1wjn] {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    align-items: start;
    grid-template-areas:
        "mapa mapa mapa mapa mapa idade idade idade cls cls cls cls"
        "mapa mapa mapa mapa mapa gen   gen   gen   esc esc esc esc"
        "inv  inv  inv  inv  inv  inv   rank  rank  rank rank rank rank";
}

.a-mapa[b-wjjeir1wjn]   { grid-area: mapa; grid-row: 1 / 3; align-self: stretch; }
.a-idade[b-wjjeir1wjn]  { grid-area: idade; grid-row: 1 / 2; }
.a-genero[b-wjjeir1wjn] { grid-area: gen; grid-row: 2 / 3; }
.a-classe[b-wjjeir1wjn] { grid-area: cls; grid-row: 1 / 2; }
.a-esc[b-wjjeir1wjn]    { grid-area: esc; grid-row: 2 / 3; }
.a-inv[b-wjjeir1wjn]    { grid-area: inv; }
.a-rank[b-wjjeir1wjn]   { grid-area: rank; }

/* Cada painel ocupa o que precisa; só o mapa preenche, porque a área dele é
   justamente o espaço disponível. */
.grade > .painel[b-wjjeir1wjn] { align-self: start; }
.grade > .a-mapa[b-wjjeir1wjn] { align-self: stretch; }

.a-genero .genero[b-wjjeir1wjn] { justify-content: flex-start; gap: 1.5rem; }
.a-genero .rosca[b-wjjeir1wjn] { width: 92px; height: 92px; }

.a-esc .barras-mini li[b-wjjeir1wjn] { grid-template-columns: 9.5rem minmax(0, 1fr) 3rem; }
.a-esc .mini-rot[b-wjjeir1wjn] { white-space: normal; line-height: 1.25; }

@media (max-width: 1200px) {
    .grade[b-wjjeir1wjn] {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-areas:
            "mapa mapa mapa idade idade idade"
            "cls  cls  cls  gen   gen   gen"
            "esc  esc  esc  esc   esc   esc"
            "inv  inv  inv  rank  rank  rank";
    }
    .a-mapa[b-wjjeir1wjn], .a-idade[b-wjjeir1wjn], .a-genero[b-wjjeir1wjn], .a-classe[b-wjjeir1wjn], .a-esc[b-wjjeir1wjn] { grid-row: auto; }
}

@media (max-width: 820px) {
    .grade[b-wjjeir1wjn] {
        grid-template-columns: 1fr;
        grid-template-areas: "mapa" "idade" "gen" "cls" "esc" "inv" "rank";
    }
}

/* ==========================================================================
   UMA TELA — dimensionado para caber num print de notebook
   --------------------------------------------------------------------------
   O vazio anterior vinha do acoplamento entre linhas da grade: a coluna curta
   terminava e ficava esperando a coluna alta acabar para a linha seguinte
   começar. Classe e instrução agora empilham num contêiner próprio, então uma
   segue a outra imediatamente.

   As alturas das duas linhas são fixas e somam ~590px, que é o que sobra da
   janela de um notebook depois do cabeçalho, dos filtros e dos indicadores.
   ========================================================================== */
.grade[b-wjjeir1wjn] {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 340px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: stretch;
    grid-template-areas:
        "mapa mapa mapa mapa idade idade idade pilha pilha gen gen gen"
        "inv  inv  inv  inv  inv   inv   rank  rank  rank  rank rank rank";
}

.a-mapa[b-wjjeir1wjn] { grid-area: mapa; grid-row: auto; }
.a-idade[b-wjjeir1wjn] { grid-area: idade; grid-row: auto; }
.a-pilha[b-wjjeir1wjn] { grid-area: pilha; }
.a-genero[b-wjjeir1wjn] { grid-area: gen; grid-row: auto; }
.a-inv[b-wjjeir1wjn] { grid-area: inv; }
.a-rank[b-wjjeir1wjn] { grid-area: rank; }

.grade > .painel[b-wjjeir1wjn], .grade > .pilha[b-wjjeir1wjn] { align-self: stretch; }

.pilha[b-wjjeir1wjn] {
    display: grid;
    grid-template-rows: auto auto;
    gap: 0.75rem;
    align-content: start;
    min-height: 0;
}

/* ── Densidade para caber ── */
.painel[b-wjjeir1wjn] { padding: 0.75rem 0.9rem 0.85rem; }
.painel-topo[b-wjjeir1wjn] { margin-bottom: 0.55rem; }
.painel-topo h2[b-wjjeir1wjn] { font-size: 0.85rem; }
.painel-topo p[b-wjjeir1wjn] { font-size: 0.72rem; margin-top: 0.15rem; }

.barras-mini[b-wjjeir1wjn] { gap: 0.1rem; }
.barras-mini li[b-wjjeir1wjn] { padding: 0; grid-template-columns: 2.6rem minmax(0, 1fr) 2.6rem; }
.mini-trilho[b-wjjeir1wjn] { height: 7px; }
.mini-rot[b-wjjeir1wjn], .mini-pct[b-wjjeir1wjn] { font-size: 0.63rem; }

.a-idade .barras-mini li[b-wjjeir1wjn] { grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem; }
/* "Fundamental incompleto" tem 22 caracteres e não cabia em 8,2rem, então
   virava "Fundamental incomp…". A coluna cresceu e o rótulo passa a quebrar
   em duas linhas quando ainda assim faltar espaço: linha mais alta é melhor
   que palavra cortada, porque aqui o texto é o próprio dado. */
.a-esc .barras-mini li[b-wjjeir1wjn] { grid-template-columns: 10rem minmax(0, 1fr) 2.6rem; }
.a-esc .mini-rot[b-wjjeir1wjn] { white-space: normal; line-height: 1.2; }
.a-inv .barras-mini li[b-wjjeir1wjn] { grid-template-columns: 7rem minmax(0, 1fr) 2.8rem; }

.a-genero .rosca[b-wjjeir1wjn] { width: 78px; height: 78px; }
.a-genero .genero[b-wjjeir1wjn] { gap: 1rem; justify-content: flex-start; }
.legenda-genero li[b-wjjeir1wjn] { font-size: 0.76rem; }

.a-rank .top-linha[b-wjjeir1wjn] {
    grid-template-columns: 1.3rem minmax(120px, 2fr) minmax(0, 5fr) 4rem 3.2rem;
    padding: 0.16rem 0;
}
.a-rank .top-nome[b-wjjeir1wjn] { font-size: 0.76rem; }
.a-rank .top-valor[b-wjjeir1wjn], .a-rank .top-pct[b-wjjeir1wjn] { font-size: 0.7rem; }

.a-inv .dobra-corpo[b-wjjeir1wjn] { padding-top: 0.55rem; }
.a-inv .sub[b-wjjeir1wjn] { margin-bottom: 0.4rem; }

/* Esta regra é que manda no inventário (três classes ganham das duas da regra
   geral). Com 0,6rem o rótulo do próximo grupo colava na última barra do
   anterior e as duas listas liam como uma só. */
.a-inv .barras-mini + .sub[b-wjjeir1wjn] {
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.a-inv .rodape-dobra[b-wjjeir1wjn] { margin-top: 0.5rem; padding-top: 0.45rem; font-size: 0.68rem; }

/* Painéis com conteúdo alto rolam por dentro apenas se estourarem, para o
   conjunto nunca empurrar a página. */
.a-idade[b-wjjeir1wjn], .a-inv[b-wjjeir1wjn], .a-rank[b-wjjeir1wjn] { min-height: 0; overflow: hidden; }
.a-mapa .moldura-mapa[b-wjjeir1wjn] { min-height: 0; }
.mapa[b-wjjeir1wjn] { min-height: 0; }

/* ── Faixa de indicadores mais baixa ── */
.indicador[b-wjjeir1wjn] { padding: 0.6rem 0.85rem; }
.ind-valor[b-wjjeir1wjn] { font-size: 1.15rem; }
.ind-rotulo[b-wjjeir1wjn] { font-size: 0.58rem; }
.ind-nota[b-wjjeir1wjn] { font-size: 0.65rem; }

.cabecalho[b-wjjeir1wjn] { padding: 0.15rem 0 0.7rem; }
.titulo[b-wjjeir1wjn] { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.barra-filtros[b-wjjeir1wjn] { padding: 0.7rem 0; margin-bottom: 0.8rem; }
.painel-visao[b-wjjeir1wjn] { padding-bottom: 1rem; }

@media (max-width: 1200px) {
    .grade[b-wjjeir1wjn] {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "mapa mapa mapa idade idade idade"
            "pilha pilha pilha gen gen gen"
            "inv  inv  inv  rank rank rank";
    }
    .a-idade[b-wjjeir1wjn], .a-inv[b-wjjeir1wjn], .a-rank[b-wjjeir1wjn] { overflow: visible; }
}

@media (max-width: 820px) {
    .grade[b-wjjeir1wjn] {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-template-areas: "mapa" "idade" "pilha" "gen" "inv" "rank";
    }
}

/* ==========================================================================
   CORREÇÃO DE POSICIONAMENTO
   --------------------------------------------------------------------------
   `grid-area: gen` já define linha E coluna. Declarar `grid-row: auto` logo
   depois ANULA a linha, e o painel cai no posicionamento automático — foi o
   que jogou o gráfico de gênero por cima dos vizinhos.

   Aqui só a área é declarada. Nada de grid-row avulso.
   ========================================================================== */
.grade[b-wjjeir1wjn] {
    grid-template-areas:
        "mapa mapa mapa mapa idade idade idade pilha pilha pilha gen gen"
        "inv  inv  inv  inv  inv   inv   rank  rank  rank  rank  rank rank";
}

.a-mapa[b-wjjeir1wjn]   { grid-area: mapa; }
.a-idade[b-wjjeir1wjn]  { grid-area: idade; }
.a-pilha[b-wjjeir1wjn]  { grid-area: pilha; }
.a-genero[b-wjjeir1wjn] { grid-area: gen; }
.a-inv[b-wjjeir1wjn]    { grid-area: inv; }
.a-rank[b-wjjeir1wjn]   { grid-area: rank; }

/* A pilha ganhou uma coluna: com 2/12 os percentuais de classe e instrução
   ficavam cortados na borda. */
.a-esc .barras-mini li[b-wjjeir1wjn] { grid-template-columns: 8.5rem minmax(0, 1fr) 2.4rem; }
.a-esc .mini-rot[b-wjjeir1wjn] { white-space: normal; line-height: 1.2; }
.a-classe .barras-mini li[b-wjjeir1wjn] { grid-template-columns: 1.8rem minmax(0, 1fr) 2.4rem; }

/* Gênero em coluna estreita: rosca em cima, legenda embaixo. Lado a lado só
   caberia espremendo os dois. */
.a-genero .genero[b-wjjeir1wjn] {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    height: 100%;
}

.a-genero .rosca[b-wjjeir1wjn] { width: 96px; height: 96px; }
.a-genero .legenda-genero[b-wjjeir1wjn] { width: 100%; }

/* ==========================================================================
   ALINHAMENTO EXATO DA PILHA
   --------------------------------------------------------------------------
   .a-classe e .a-esc carregavam grid-area de quando eram filhas diretas da
   grade. Agora vivem dentro da pilha, onde esses nomes de área não existem —
   o grid criava uma coluna implícita de 0px e empurrava os painéis 12px para
   dentro, deixando-os 12px mais estreitos que os vizinhos.
   ========================================================================== */
.a-classe[b-wjjeir1wjn], .a-esc[b-wjjeir1wjn] { grid-area: auto; }

/* Duas fileiras iguais que somam exatamente a altura da linha da grade: os
   painéis passam a bater pixel a pixel com o mapa, o perfil etário e o gênero. */
.pilha[b-wjjeir1wjn] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
    align-content: stretch;
    gap: 0.75rem;
    height: 100%;
}

.pilha > .painel[b-wjjeir1wjn] {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Com altura imposta, o conteúdo curto se distribui em vez de encostar no
   topo e deixar todo o vazio embaixo. */
.pilha > .painel .barras-mini[b-wjjeir1wjn] {
    margin-block: auto;
    width: 100%;
}

/* ── Botão de captura, no limite direito da barra ── */
.acoes-barra[b-wjjeir1wjn] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    justify-self: end;
}

.botao-camera[b-wjjeir1wjn] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.botao-camera:hover[b-wjjeir1wjn] {
    color: var(--tinta-sobre-sinal);
    background: var(--sinal);
    border-color: var(--sinal);
}

/* Botão em captura: o processo embute o CSS e as fontes, o que leva um
   instante. Sem sinal, o usuário clica de novo achando que falhou. */
.botao-camera.ocupado[b-wjjeir1wjn] {
    color: var(--sinal);
    border-color: var(--sinal);
    cursor: progress;
}

.botao-camera.ocupado svg[b-wjjeir1wjn] { animation: pulsar-camera-b-wjjeir1wjn 0.9s ease-in-out infinite; }

@keyframes pulsar-camera-b-wjjeir1wjn {
    50% { opacity: 0.35; }
}

.botao-camera:disabled[b-wjjeir1wjn] { pointer-events: none; }

/* ── Grade com o consumo: ranking desce para junto do inventário ── */
.grade[b-wjjeir1wjn] {
    grid-template-areas:
        "mapa mapa mapa mapa idade idade idade pilha pilha pilha gen gen"
        "inv  inv  inv  inv  inv   inv   cons  cons  cons  cons  cons cons"
        "rank rank rank rank rank rank cons cons cons cons cons cons";
    grid-template-rows: 340px auto auto;
}

/* São 96 categorias: a lista rola por dentro do painel para que ele continue
   ocupando exatamente a altura da área do grid. Sem o min-height: 0 o item de
   grid adota a altura do conteúdo e empurra o dashboard para fora da tela. */
.a-consumo[b-wjjeir1wjn] {
    grid-area: cons;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.a-consumo > .painel-topo[b-wjjeir1wjn],
.a-consumo > .tc-rodape[b-wjjeir1wjn] { flex: none; }

/* O rótulo precisa poder encolher: sem o min-width: 0 o grid usa a largura do
   texto como mínimo e as colunas numéricas são empurradas para fora. */
.tc-rotulo[b-wjjeir1wjn] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calculando[b-wjjeir1wjn] {
    margin: 0;
    padding: 1.5rem 0;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.74rem;
    color: var(--text-fraco);
}

/* ── Tabela de consumo ── */
/* As 22 principais cabem sem rolagem; abrir subcategorias rola por dentro em
   vez de esticar o painel. O teto é obrigatório: as linhas do grid são auto,
   então sem ele o flex recebe espaço infinito, o painel cresce para a altura
   do conteúdo e leva o dashboard inteiro para fora do print. */
.tabela-consumo[b-wjjeir1wjn] {
    display: grid;
    gap: 1px;
    grid-auto-rows: max-content;
    flex: 1;
    min-height: 0;
    max-height: 30rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

/* O cabeçalho acompanha a rolagem: com 96 linhas, perder os rótulos das
   colunas tornaria as três últimas colunas indecifráveis. */
.tc-cabecalho[b-wjjeir1wjn] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--card-bg);
}

/* ── Hierarquia: principal clicável, subcategoria recuada ── */
.tc-pai[b-wjjeir1wjn] { cursor: pointer; border-radius: 4px; }

.tc-pai:hover[b-wjjeir1wjn] {
    background: color-mix(in oklab, var(--sinal) 7%, transparent);
}

.tc-pai:focus-visible[b-wjjeir1wjn] {
    outline: 1px solid var(--sinal);
    outline-offset: -1px;
}

.tc-nome[b-wjjeir1wjn] { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }

/* A seta é desenhada em CSS: um quadrado girado 45° com duas bordas, que ao
   abrir gira mais 45° e vira o chevron para baixo. */
.tc-seta[b-wjjeir1wjn] {
    flex: none;
    width: 0.34rem;
    height: 0.34rem;
    border-right: 1.5px solid var(--text-fraco);
    border-bottom: 1.5px solid var(--text-fraco);
    transform: rotate(-45deg);
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.tc-linha.aberta .tc-seta[b-wjjeir1wjn] { transform: rotate(45deg); border-color: var(--sinal); }
.tc-pai:hover .tc-seta[b-wjjeir1wjn] { border-color: var(--sinal); }

/* Sem filhas: mantém a coluna da seta para os nomes alinharem. */
.tc-seta-vazia[b-wjjeir1wjn] { border: 0; }

/* A subcategoria se distingue por recuo e por um trilho à esquerda, não por
   apagar o texto: em --text-fraco sobre o fundo do painel o contraste era
   2,8:1, abaixo dos 4,5:1 que texto pequeno exige, e a leitura sumia. Com
   --text-muted são 5,5:1, e a hierarquia continua óbvia pelo recuo. */
.tc-filha .tc-nome[b-wjjeir1wjn] {
    padding-left: 1.5rem;
    font-size: 0.71rem;
    color: var(--text-muted);
    position: relative;
}

.tc-filha .tc-nome[b-wjjeir1wjn]::before {
    content: '';
    position: absolute;
    left: 0.55rem;
    top: -0.28rem;
    bottom: -0.28rem;
    border-left: 1px solid var(--border);
}

.tc-filha .num[b-wjjeir1wjn] { font-size: 0.69rem; }

.calculando-alto[b-wjjeir1wjn] {
    flex: 1;
    display: flex;
    align-items: center;
    max-width: 26rem;
}

.tc-cabecalho[b-wjjeir1wjn],
.tc-linha[b-wjjeir1wjn] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 4.6rem 3.2rem 2.8rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0.16rem 0.2rem;
}

.tc-cabecalho[b-wjjeir1wjn] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-fraco);
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.35rem;
    margin-bottom: 0.25rem;
}

.tc-linha[b-wjjeir1wjn] { border-bottom: 1px solid rgba(255, 255, 255, 0.03); }
.tc-linha:hover[b-wjjeir1wjn] { background: rgba(255, 255, 255, 0.025); }

.tc-nome[b-wjjeir1wjn] {
    font-size: 0.75rem;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tabela-consumo .num[b-wjjeir1wjn] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.71rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--text-muted);
}

/* Mesma razão da subcategoria: --text-fraco não alcança contraste de leitura
   nesse corpo de texto. A hierarquia entre potencial e participação já está
   dada pela ordem das colunas. */
.tc-part[b-wjjeir1wjn] { color: var(--text-muted); }
.tabela-consumo .tc-indice[b-wjjeir1wjn] {
    font-weight: 600;
    color: var(--text-main);
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
}

/* O número fica em texto e a cor vai para a marca ao lado: cor clara como
   texto perde contraste, e a marca lê igual em qualquer tamanho de fonte. */
.tc-indice[b-wjjeir1wjn]::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--afinidade, var(--text-fraco));
    flex: none;
}

.tc-rodape[b-wjjeir1wjn] {
    margin: 0.7rem 0 0;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border);
    font-size: 0.7rem;
    color: var(--text-fraco);
}

.tc-rodape b[b-wjjeir1wjn] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    color: var(--text-muted);
}

@media (max-width: 1200px) {
    .grade[b-wjjeir1wjn] {
        grid-template-areas:
            "mapa mapa mapa idade idade idade"
            "pilha pilha pilha gen gen gen"
            "inv  inv  inv  cons cons cons"
            "rank rank rank cons cons cons";
    }
}

@media (max-width: 820px) {
    .grade[b-wjjeir1wjn] {
        grid-template-areas: "mapa" "idade" "pilha" "gen" "inv" "rank" "cons";
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   Pontos de mídia agrupados sobre o mapa
   ══════════════════════════════════════════════════════════════════════════ */

/* Os círculos não capturam ponteiro: o clique no mapa é para trocar o recorte
   da UF, e um grupo por cima roubaria o alvo. */
.pois[b-wjjeir1wjn] { pointer-events: none; }

/* Vermelho por padrão: quente contra o mapa azul, e a dupla sobrevive aos
   daltonismos vermelho-verde. O fill sozinho não resolve a borda: a rampa do
   choropleth vai de #1960AA a #AAD4F2, então qualquer cor perde contraste de
   luminância em algum ponto dela — quem garante o recorte é o traço escuro. */
.pois circle[b-wjjeir1wjn] {
    fill: #E5484D;
    fill-opacity: 0.88;
    stroke: var(--preto);
    stroke-width: 0.7;

    /* Sem isso o contorno engorda junto com o zoom e os grupos viram manchas. */
    vector-effect: non-scaling-stroke;
}

/* Com a legenda aberta, cada grupo assume a cor do tipo de mídia predominante.
   Fora dela o mapa fica de uma cor só, que é o que serve quando a pergunta é
   "onde tem inventário" e não "de que tipo". */
.mapa-legenda .pois circle[data-faixa="1"][b-wjjeir1wjn] { fill: #9B6DF2; }
.mapa-legenda .pois circle[data-faixa="2"][b-wjjeir1wjn] { fill: #1A8F7A; }
.mapa-legenda .pois circle[data-faixa="3"][b-wjjeir1wjn] { fill: #AAB2C2; }

/* ── Balão de identificação ── */
.poi-balao[b-wjjeir1wjn] {
    position: absolute;
    z-index: 5;
    transform: translateY(-50%);
    padding: 0.35rem 0.5rem 0.35rem 0.6rem;

    /* width: max-content é obrigatório aqui. Sem ele o elemento absoluto usa
       shrink-to-fit — a largura vira o espaço que sobra até a borda do pai —
       e perto da direita o balão colapsava para 29px, quebrando o texto letra
       a letra numa coluna de 717px de altura. Com max-content a largura passa
       a depender só do conteúdo, e medi-la para decidir o lado deixa de ser
       circular. */
    width: max-content;
    max-width: 15.5rem;
    border-radius: 6px;
    border: 1px solid var(--borda-forte);
    background: color-mix(in oklab, var(--elevado) 92%, transparent);
    backdrop-filter: blur(3px);
    color: var(--text-main);
    font-size: 0.68rem;
    line-height: 1.35;

    /* Quebra em vez de cortar: nome de ponto passa fácil de 15rem, e com
       nowrap o texto sumia na borda sem nenhum sinal de que havia mais. */
    white-space: normal;
    overflow-wrap: anywhere;

    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

/* O lado e o encaixe dentro da moldura são resolvidos no mapa.js, que conhece
   a largura do balão e a da moldura. Aqui sobra só o centramento vertical. */

/* Um filete na cor do grupo: liga o balão ao que a legenda diz. */
.poi-balao[b-wjjeir1wjn]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.35rem;
    bottom: 0.35rem;
    width: 2px;
    border-radius: 2px;
    background: #E5484D;
}

.poi-balao[data-faixa="1"][b-wjjeir1wjn]::before { background: #9B6DF2; }
.poi-balao[data-faixa="2"][b-wjjeir1wjn]::before { background: #1A8F7A; }
.poi-balao[data-faixa="3"][b-wjjeir1wjn]::before { background: #AAB2C2; }

/* ── Painel da legenda ── */
.acoes-mapa[b-wjjeir1wjn] { display: flex; align-items: center; gap: 0.6rem; }

.botao-legenda[b-wjjeir1wjn] {
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.66rem;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.botao-legenda:hover[b-wjjeir1wjn] { color: var(--text-main); border-color: var(--borda-forte); }

.botao-legenda.ativo[b-wjjeir1wjn] {
    color: var(--sinal);
    border-color: color-mix(in oklab, var(--sinal) 40%, var(--border));
    background: var(--sinal-fraco);
}

.legenda-mapa[b-wjjeir1wjn] {
    position: absolute;
    left: 0.6rem;
    bottom: 0.6rem;
    z-index: 4;
    width: 13.5rem;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: color-mix(in oklab, var(--elevado) 94%, transparent);
    backdrop-filter: blur(4px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.legenda-titulo[b-wjjeir1wjn] {
    margin: 0 0 0.4rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.56rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-fraco);
}

.legenda-linha[b-wjjeir1wjn] {
    display: grid;
    grid-template-columns: 0.55rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.4rem;
    padding: 0.16rem 0.3rem;
    border-radius: 4px;
}

/* ── Linha clicável: liga e desliga o tipo no filtro ── */
.legenda-botao[b-wjjeir1wjn] {
    width: 100%;
    border: 0;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.legenda-botao:hover[b-wjjeir1wjn] { background: rgba(255, 255, 255, 0.055); }

.legenda-botao:focus-visible[b-wjjeir1wjn] {
    outline: 1px solid var(--sinal);
    outline-offset: -1px;
}

/* Marcada: o filete à esquerda evita depender só do fundo, que sobre o painel
   translúcido da legenda fica sutil demais. */
.legenda-botao.marcada[b-wjjeir1wjn] {
    background: var(--sinal-fraco);
    box-shadow: inset 2px 0 0 var(--sinal);
}

.legenda-botao.marcada .legenda-nome[b-wjjeir1wjn] { color: var(--text-main); font-weight: 600; }
.legenda-botao.marcada .legenda-conta[b-wjjeir1wjn] { color: var(--text-muted); }

.legenda-inerte[b-wjjeir1wjn] { cursor: default; }

/* Com filtro ativo, o que ficou de fora se apaga — continua clicável, para
   somar ao filtro, mas não disputa atenção com o que está valendo. */
.legenda-mapa.com-filtro .legenda-botao:not(.marcada)[b-wjjeir1wjn] { opacity: 0.45; }
.legenda-mapa.com-filtro .legenda-botao:not(.marcada):hover[b-wjjeir1wjn] { opacity: 1; }
.legenda-mapa.com-filtro .legenda-inerte[b-wjjeir1wjn] { opacity: 0.45; }

.legenda-cor[b-wjjeir1wjn] {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    border: 1px solid var(--preto);
}

.legenda-nome[b-wjjeir1wjn] {
    font-size: 0.66rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.legenda-conta[b-wjjeir1wjn] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-fraco);
}

.legenda-nota[b-wjjeir1wjn] {
    margin: 0.45rem 0 0;
    padding-top: 0.4rem;
    border-top: 1px solid var(--border);
    font-size: 0.6rem;
    line-height: 1.35;
    color: var(--text-fraco);
    white-space: normal;
}

/* Só um nível aparece por vez. O mapa.js põe .mapa-perto no SVG ao passar de
   3x de aproximação. */
.mapa .pois-perto[b-wjjeir1wjn] { display: none; }
.mapa.mapa-perto .pois-longe[b-wjjeir1wjn] { display: none; }
.mapa.mapa-perto .pois-perto[b-wjjeir1wjn] { display: block; }

/* ── Interruptor no cabeçalho do mapa ── */
.liga-pois[b-wjjeir1wjn] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-size: 0.68rem;
    color: var(--text-muted);
    user-select: none;
    white-space: nowrap;
}

.liga-pois:hover[b-wjjeir1wjn] { color: var(--text-main); }

.liga-pois input[b-wjjeir1wjn] {
    appearance: none;
    width: 1.6rem;
    height: 0.9rem;
    border-radius: 999px;
    background: var(--border);
    position: relative;
    cursor: pointer;
    transition: background 0.18s ease;
}

.liga-pois input[b-wjjeir1wjn]::after {
    content: '';
    position: absolute;
    top: 0.13rem;
    left: 0.15rem;
    width: 0.64rem;
    height: 0.64rem;
    border-radius: 50%;
    background: var(--text-fraco);
    transition: transform 0.18s ease, background 0.18s ease;
}

.liga-pois input:checked[b-wjjeir1wjn] { background: color-mix(in oklab, var(--sinal) 35%, var(--border)); }
.liga-pois input:checked[b-wjjeir1wjn]::after { transform: translateX(0.68rem); background: var(--sinal); }
.liga-pois input:focus-visible[b-wjjeir1wjn] { outline: 1px solid var(--sinal); outline-offset: 2px; }


/* Contagem na opção da faceta: mostra o que cada escolha ainda traz. */
.opcao-conta[b-wjjeir1wjn] {
    margin-left: auto;
    padding-left: 0.5rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-fraco);
}


/* ══════════════════════════════════════════════════════════════════════════
   Mapa em tela cheia
   ══════════════════════════════════════════════════════════════════════════ */

/* Sobreposição na própria página, não a Fullscreen API: a captura em PNG
   rasteriza o DOM, e no fullscreen nativo o elemento vira uma camada à parte
   que a serialização não enxerga igual. */
.a-mapa.expandido[b-wjjeir1wjn] {
    position: fixed;
    inset: 0;
    z-index: 60;
    border-radius: 0;
    border: 0;
    margin: 0;
    padding: 1rem 1.25rem 1.25rem;
    background: var(--bg-page);

    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    animation: mapa-abre-b-wjjeir1wjn 0.2s ease-out;
}

/* Só opacidade, de propósito. Um transform aqui cria bloco de contenção e
   quebraria o position: fixed de qualquer descendente — e se a animação não
   completar, o elemento fica preso na escala inicial e o "tela cheia" nasce
   menor que a tela. Foi o que aconteceu na primeira versão. */
@keyframes mapa-abre-b-wjjeir1wjn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.a-mapa.expandido:focus[b-wjjeir1wjn] { outline: none; }

/* A moldura toma toda a altura que sobra do cabeçalho. O min-height: 0 é
   obrigatório num filho de flex: sem ele a moldura adota a altura do conteúdo
   e o mapa transborda a janela. */
.a-mapa.expandido .moldura-mapa[b-wjjeir1wjn] {
    flex: 1;
    min-height: 0;
    border-radius: 10px;
}

.a-mapa.expandido .mapa[b-wjjeir1wjn] { height: 100%; }

.titulo-mapa[b-wjjeir1wjn] { min-width: 0; }

.sub-mapa[b-wjjeir1wjn] {
    margin: 0.25rem 0 0;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.sub-mapa b[b-wjjeir1wjn] { color: var(--text-main); font-weight: 600; }

.botao-fechar-mapa[b-wjjeir1wjn] {
    width: 1.7rem;
    height: 1.7rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.botao-fechar-mapa:hover[b-wjjeir1wjn] {
    color: var(--text-main);
    border-color: var(--borda-forte);
    background: var(--elevado);
}

/* Em tela cheia sobra espaço: a legenda pode crescer e respirar. */
.a-mapa.expandido .legenda-mapa[b-wjjeir1wjn] {
    left: 1rem;
    bottom: 1rem;
    width: 16rem;
    padding: 0.75rem 0.85rem;
}

.a-mapa.expandido .legenda-linha[b-wjjeir1wjn] { padding: 0.16rem 0; }
.a-mapa.expandido .legenda-nome[b-wjjeir1wjn] { font-size: 0.72rem; }
.a-mapa.expandido .legenda-conta[b-wjjeir1wjn] { font-size: 0.68rem; }
.a-mapa.expandido .legenda-titulo[b-wjjeir1wjn] { font-size: 0.6rem; }

.a-mapa.expandido .zoom[b-wjjeir1wjn] { top: 1rem; right: 1rem; }

/* ── Botão de tela cheia junto ao zoom ── */
.zoom .expandir[b-wjjeir1wjn] { font-size: 0.8rem; line-height: 1; }


/* ── Cartão dentro do balão ── */
.bal-titulo[b-wjjeir1wjn] {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-main);

    /* Segundo teto, depois do corte em 70 caracteres: nome comprido em fonte
       grande ainda ocuparia quatro linhas na largura do balão. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bal-val[b-wjjeir1wjn] { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.bal-sub[b-wjjeir1wjn] {
    margin: 0.1rem 0 0;
    font-size: 0.64rem;
    color: var(--text-fraco);
}

/* Separa o cabeçalho dos pares rótulo/valor sem gastar uma linha inteira. */
.bal-linha:first-of-type[b-wjjeir1wjn] { margin-top: 0.4rem; padding-top: 0.35rem; border-top: 1px solid var(--border); }

.bal-linha[b-wjjeir1wjn] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.16rem;
}

.bal-rot[b-wjjeir1wjn] {
    flex: none;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-fraco);
}

.bal-val[b-wjjeir1wjn] {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-align: right;
    overflow-wrap: anywhere;
}

/* Números em fonte tabular: fluxo e contagem alinham e não dançam. */
.bal-val[b-wjjeir1wjn] { font-variant-numeric: tabular-nums; }
/* /Components/Pages/VisaoMunicipio.razor.rz.scp.css */
/* Visão município: só a moldura em volta do CidadePainel — o painel em si
   traz o próprio CSS isolado. */

/* ── Barra de escolha do município ──
   Uma faceta só, com largura de campo de busca: esticá-la na linha inteira
   faria o dropdown de 5.571 cidades abrir do tamanho da tela. */
.barra-municipio[b-i1p6ik5pa5] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 1rem;
    margin-bottom: 1.2rem;
    border-bottom: 1px solid var(--border);
}

/* ::deep porque a faceta é outro componente: o isolamento do Blazor carimba
   o atributo de escopo só no markup desta página, e a raiz do filho não o
   recebe. Sem isto a regra não alcança nada. */
.barra-municipio[b-i1p6ik5pa5]  .faceta { width: min(22rem, 100%); }

.limpar-municipio[b-i1p6ik5pa5] {
    padding: 0.34rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.76rem;
    cursor: pointer;
    transition: border-color 0.16s, color 0.16s;
}

.limpar-municipio:hover[b-i1p6ik5pa5] { border-color: var(--borda-forte); color: var(--text-main); }

.estado[b-i1p6ik5pa5] {
    padding: 2.5rem 0;
    color: var(--text-fraco);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.8rem;
}

.vazio[b-i1p6ik5pa5] {
    max-width: 38rem;
    padding: 1.5rem 0 2.5rem;
}

.etiqueta[b-i1p6ik5pa5] {
    display: block;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-fraco);
    margin-bottom: 0.4rem;
}

.titulo[b-i1p6ik5pa5] {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0 0 0.6rem;
}

.texto[b-i1p6ik5pa5] {
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0 0 1.2rem;
}

/* Cidades do filtro, quando há mais de uma: a ativa usa o acento, as outras
   ficam em texto secundário para não competir com o painel abaixo. */
.escolha[b-i1p6ik5pa5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.chip[b-i1p6ik5pa5] {
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.chip small[b-i1p6ik5pa5] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.66rem;
    margin-left: 0.3rem;
    opacity: 0.75;
}

.chip:hover[b-i1p6ik5pa5] { border-color: var(--borda-forte); color: var(--text-main); }

.chip.ativa[b-i1p6ik5pa5] {
    background: var(--sinal);
    border-color: var(--sinal);
    color: var(--tinta-sobre-sinal);
}

.chip:focus-visible[b-i1p6ik5pa5] {
    outline: 2px solid var(--sinal);
    outline-offset: 2px;
}