/**
 * mod_anuariocoop :: layout "painel" — estilos do mapa interativo do Brasil.
 * Cards de indicadores a esquerda, painel do mapa a direita (arte mapa.png).
 * Paleta AnuarioCoop (azul-marinho / azul / verde), autocontido.
 */
.ac-mapa {
    --ac-navy: #171c66;
    --ac-blue: #5883d0;
    --ac-green: #6fbc85;
    --ac-ink: #1f2540;
    --ac-ink-soft: #6a7488;
    --ac-line: #e6e9f2;
    --ac-card-bg: #f5f7fb;
    --ac-bg: #fbfcfe;

    position: relative;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--ac-ink);
}

.ac-mapa-empty {
    padding: 24px;
    text-align: center;
    color: var(--ac-ink-soft);
    background: var(--ac-card-bg);
    border: 1px solid var(--ac-line);
    border-radius: 14px;
}

.ac-mapa-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 26px;
    align-items: stretch;
}

/* ---------- Cards de indicadores (esquerda) ---------- */
.ac-mapa-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-content: start;
}

.ac-mapa-card {
    display: flex;
    flex-direction: column;
    padding: 24px 26px;
    background: var(--ac-card-bg);
    border: 1px solid var(--ac-line);
    border-radius: 16px;
}

.ac-mapa-card-value {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ac-mapa-card-num {
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.01em;
    color: var(--ocb-azul-marinho);
    font-family: var(--font-intro-light);
}

.ac-mapa-card-unit {
    font-size: 1rem;
    font-weight: 400;
    color: var(--ac-ink-soft);
}

.ac-mapa-card-unit:empty {
    display: none;
}

.ac-mapa-card-accent {
    width: 38px;
    height: 3px;
    margin: 10px 0 12px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--ac-blue), var(--ac-green));
}

.ac-mapa-card-label {
    font-size: .92rem;
    color: var(--ac-ink-soft);
}

/* Primeira letra da label em maiúscula (apenas a inicial, não cada palavra). */
.ac-mapa-card-label::first-letter {
    text-transform: uppercase;
}

/* ---------- Painel do mapa (direita) ---------- */
.ac-mapa-panel {
    display: flex;
    flex-direction: column;
    padding: 22px 24px;
    background: var(--ac-bg);
    border: 1px solid var(--ac-line);
    border-radius: 16px;
}

.ac-mapa-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.ac-mapa-panel-title {
    font-size: .98rem;
    font-weight: 700;
    color: var(--ac-navy);
}

.ac-mapa-panel-note {
    font-size: .78rem;
    font-style: italic;
    color: var(--ac-ink-soft);
}

.ac-mapa-canvas {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 8px 0;
}

.ac-mapa-svg {
    width: 100%;
    max-width: 460px;
}

.ac-mapa-svg svg {
    width: 100%;
    height: auto;
    display: block;
}

.ac-mapa-svg .uf-decor {
    fill: #e3e5ef;
    stroke: #fff;
    stroke-width: .3;
    pointer-events: none;
}

.ac-mapa-svg .uf-state {
    fill: #cdd8f0;
    stroke: #fff;
    stroke-width: .6;
    cursor: pointer;
    transition: fill .16s ease, filter .16s ease;
    outline: none;
}

.ac-mapa-svg .uf-state:hover,
.ac-mapa-svg .uf-state:focus-visible {
    fill: var(--ac-blue) !important;
    filter: brightness(1.03);
}

.ac-mapa-svg .uf-state.uf-selected {
    /* Preenchimento definido via JS (painel.js): um tom abaixo da cor da região
       da UF selecionada. Aqui só um leve reforço de borda para destacar. */
    stroke-width: 1;
}

/* tooltip: somente o nome do estado */
.ac-mapa-tip {
    position: absolute;
    z-index: 5;
    transform: translate(-50%, calc(-100% - 12px));
    padding: 5px 10px;
    background: var(--ac-navy);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 8px;
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(23, 28, 102, .25);
}

.ac-mapa-tip::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--ac-navy);
}

/* rodape do painel: Fonte a esquerda (onde ficava a legenda) + botoes a direita */
.ac-mapa-panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.ac-mapa-legend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* Cede espaço aos botões: encolhe e quebra os itens em mais linhas em vez de
       empurrar o grupo de botões para baixo. */
    flex: 1 1 auto;
    min-width: 0;
}

.ac-mapa-legend-cap {
    font-size: .72rem;
    color: var(--ac-ink-soft);
}

.ac-mapa-legend-step {
    width: 18px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
}

.ac-mapa-legend-step.s1 {
    background: #dbe4f6;
}

.ac-mapa-legend-step.s2 {
    background: #aec1e8;
}

.ac-mapa-legend-step.s3 {
    background: #7d9bd8;
}

.ac-mapa-legend-step.s4 {
    background: #45659f;
}

.ac-mapa-legend-step.s5 {
    background: var(--ac-navy);
}

/* Legenda por região (substitui a escala menos->mais). */
.ac-mapa-legend--regioes {
    flex-wrap: wrap;
    gap: 6px 12px;
}

.ac-mapa-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    color: var(--ac-ink-soft);
}

.ac-mapa-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
    flex-shrink: 0;
}

.ac-mapa-hintwrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* Mantém os botões juntos na mesma linha da legenda (não encolhe). */
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ac-mapa-hint {
    font-size: .82rem;
    color: var(--ac-ink-soft);
}

.ac-mapa-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--ac-blue);
    background: #fff;
    border: 1px solid var(--ac-line);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .18s, color .18s, border-color .18s;
}

.ac-mapa-reset:hover {
    color: #fff;
    background: var(--ac-blue);
    border-color: var(--ac-blue);
}

.ac-mapa-reset[hidden] {
    display: none;
}

/* "Ver [Estado]": ação primária (pílula preenchida), ao lado do "Ver Brasil". */
.ac-mapa-view {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: .78rem;
    font-weight: 600;
    color: #fff;
    background: var(--ac-navy);
    border: 1px solid var(--ac-navy);
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .18s, border-color .18s;
}

.ac-mapa-view:hover {
    color: #fff;
    background: var(--ac-blue);
    border-color: var(--ac-blue);
    text-decoration: none;
}

.ac-mapa-view[hidden] {
    display: none;
}

.ac-mapa-source {
    margin: 0;
    font-size: .78rem;
    font-style: italic;
    color: var(--ac-ink-soft);
    /* Ocupa o lado esquerdo do rodapé e cede espaço aos botões (como a legenda fazia). */
    flex: 1 1 auto;
    min-width: 0;
}

/* ---------- Responsivo ---------- */
@media (max-width: 860px) {
    .ac-mapa-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .ac-mapa-cards {
        grid-template-columns: 1fr;
    }
}