/* 30-layout.css — layout principal e legenda de choropleth
   Extraído de index.html por split_css.py.
   O NÚMERO no nome é a posição na cascata: os arquivos são
   carregados em ordem alfabética de nome, e é essa ordem que
   decide quem ganha o desempate entre regras de mesma
   especificidade. Não renumere sem conferir o que passa a
   sobrescrever o quê. */
    /* ── LAYOUT PRINCIPAL ── */
    .main-content {
      flex: 1;
      overflow: hidden;
      position: relative;
    }

    #map {
      width: 100%;
      height: 100%;
    }

    /* ── LEGENDA CHOROPLETH ── */
    #choropleth-legend {
      background: rgba(6, 13, 24, 0.93);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 14px;
      backdrop-filter: blur(14px);
      font-size: 11px;
      display: none;
    }

    #choropleth-legend h4 {
      font-family: var(--display);
      font-size: 9px;
      color: var(--muted);
      letter-spacing: 0.1em;
      margin-bottom: 8px;
    }

    .choro-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;
      font-size: 10px;
      color: var(--muted);
    }

    .choro-swatch {
      width: 14px;
      height: 10px;
      border-radius: 2px;
      flex-shrink: 0;
    }