/* Mapa de Canela — estilo do widget.
   Tudo fica dentro de .mc-raiz, para o mapa poder entrar numa pagina que ja
   tem estilo proprio (o site) sem vazar nada. As cores vem do design system
   quando a pagina hospedeira as define; os valores aqui sao o fallback. */
.mc-raiz{
  --mc-mata:#1E4A38; --mc-mata-escura:#12302A; --mc-pedra:#5B5F5A;
  --mc-pedra-clara:#C9CCC5; --mc-hortensia:#5D6FB5; --mc-hortensia-clara:#E4E8F5;
  --mc-neblina:#EEF1EC; --mc-papel:#FFFFFF; --mc-tinta:#152420;
  --mc-alerta:#F3E6B4; --mc-erro:#F5D9D2; --mc-suave:#33403B;
  --mc-hoje:#8A8E88; --mc-englert:#7F8FCC; --mc-conselho:#1E4A38;
  --mc-r:16px; --mc-rp:999px;
  position:relative; display:flex; flex-direction:column;
  background:var(--mc-neblina); color:var(--mc-tinta);
  font-size:15px; line-height:1.5; overflow:hidden;
  border-radius:var(--mc-r);
}
.mc-raiz *{box-sizing:border-box}
.mc-raiz.mc-cheio{border-radius:0;height:100dvh}
.mc-raiz.mc-caixa{height:min(76vh,680px);border:1px solid var(--mc-pedra-clara)}

.mc-topo{background:var(--mc-mata);color:#fff;padding:9px 12px;display:flex;
  gap:10px;align-items:center;flex-wrap:wrap;z-index:20;flex:none}
.mc-topo h2{font-size:15px;font-weight:800;margin:0;white-space:nowrap;color:#fff}
.mc-busca{flex:1 1 220px;min-width:160px;position:relative}
.mc-busca input{width:100%;padding:8px 11px;border:0;border-radius:12px;
  font:inherit;font-size:14px;background:var(--mc-papel);color:var(--mc-tinta)}
.mc-busca input:focus{outline:3px solid var(--mc-hortensia);outline-offset:1px}
.mc-sug{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--mc-papel);
  border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.22);overflow:hidden;
  max-height:44vh;overflow-y:auto;display:none;z-index:60}
.mc-sug b{display:block;padding:8px 11px;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--mc-pedra);background:var(--mc-neblina);font-weight:600}
.mc-sug a{display:block;padding:9px 11px;cursor:pointer;border-top:1px solid var(--mc-neblina);
  font-size:13.5px;text-decoration:none;color:var(--mc-tinta)}
.mc-sug a:hover,.mc-sug a:focus{background:var(--mc-hortensia-clara);outline:none}
.mc-sug a small{display:block;color:var(--mc-pedra);font-size:11.5px}

.mc-corpo{flex:1;position:relative;min-height:0}
.mc-tela{position:absolute;inset:0;background:var(--mc-neblina)}
.mc-raiz .maplibregl-ctrl-attrib{font-size:9.5px}
.mc-raiz .maplibregl-ctrl-attrib a{color:var(--mc-suave)}

.mc-painel{position:absolute;z-index:10;background:var(--mc-papel);
  border-radius:var(--mc-r);box-shadow:0 4px 18px rgba(0,0,0,.16)}
.mc-versoes{top:10px;left:10px;padding:5px;display:flex;gap:4px;align-items:center}
.mc-versoes button{font:inherit;font-weight:600;font-size:12.5px;border:0;cursor:pointer;
  padding:7px 12px;border-radius:var(--mc-rp);background:var(--mc-neblina);color:var(--mc-suave)}
.mc-versoes button[aria-pressed=true]{color:#fff}
.mc-versoes button[data-v=hoje][aria-pressed=true]{background:var(--mc-hoje)}
.mc-versoes button[data-v=englert][aria-pressed=true]{background:var(--mc-englert);color:#12203f}
.mc-versoes button[data-v=conselho][aria-pressed=true]{background:var(--mc-conselho)}
.mc-versoes .mc-sep{width:1px;height:22px;background:var(--mc-pedra-clara);margin:0 2px}
.mc-b3d{background:var(--mc-tinta)!important;color:#fff!important}
.mc-b3d[aria-pressed=true]{background:var(--mc-hortensia)!important}
/* O balão do glossário dentro da ficha. O balão do site se abre colado na palavra, e num
   painel de 328px que rola ele estouraria a lateral e seria cortado. Aqui ele se ancora no
   rodapé da própria ficha — a palavra segue grifada, então dá pra saber de quem ele fala.
   O ancestral posicionado é a ficha, e não o corpo que rola: assim o balão fica parado. */
.mc-ficha{position:relative}
.mc-ficha [data-fcorpo] .gl{position:static}
.mc-ficha [data-fcorpo] .gl-b{position:absolute;left:12px;right:12px;bottom:12px;top:auto;
  width:auto;z-index:40;max-height:60%;overflow:auto}

/* A disputa pinta a mesma cidade por outra régua: um tom só, do claro ao escuro. O botão
   usa a cor cheia da escala, pra quem olhar saber de que leitura a tela está falando. */
/* o botão de localização mora dentro do campo de busca, à direita */
.mc-busca{position:relative}
.mc-aqui{position:absolute;right:6px;top:50%;transform:translateY(-50%);font:inherit;
  font-size:15px;line-height:1;background:none;border:0;cursor:pointer;padding:5px 6px;
  border-radius:8px;opacity:.75}
.mc-aqui:hover{opacity:1;background:rgba(0,0,0,.06)}
.mc-busca input{padding-right:34px}

/* subtítulo dentro de um bloco de camadas: diz uma vez o que doze linhas repetiam */
.mc-sub{font-size:11px;color:var(--mc-pedra);margin:7px 0 3px;padding-left:2px;
  text-transform:none;letter-spacing:0}
/* o rodapé virou uma linha: fonte curta à esquerda, botão que abre o resto à direita */
.mc-rodape{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mc-rodape button{font:inherit;font-size:11.5px;font-weight:600;background:none;border:0;
  color:var(--mc-hortensia);cursor:pointer;text-decoration:underline;padding:0}
.mc-bdisputa[aria-pressed=true]{background:var(--mc-hortensia)!important;color:#fff!important}
.mc-bcheio{display:flex;gap:5px;align-items:center}
/* .mc-versoes button[aria-pressed=true] pinta o texto de branco. Sem um fundo
   proprio, o botao ligado ficava branco no branco e sumia. */
.mc-bcheio[aria-pressed=true]{background:var(--mc-tinta)}
.mc-bcheio [data-cheio-ico]{font-size:14px;line-height:1}

/* Tela cheia por CSS. Nao depende da API de tela cheia do navegador, que o
   Safari do iPhone so da para <video> - e onde a API existir, ela entra por
   cima disto e ainda tira a barra de enderecos. */
/* Dois nomes de classe no seletor de proposito: a regra de celula do celular
   (.mc-raiz.mc-caixa{height:min(80vh,620px)}) mora dentro de um @media mais
   abaixo neste arquivo e tem a mesma forca. Empate, ganha a de baixo - e a
   tela cheia saia com 620 px de altura no telefone. Com as duas classes no
   seletor, esta ganha em qualquer ordem. */
.mc-raiz.mc-caixa.mc-expandido,
.mc-raiz.mc-cheio.mc-expandido{
  position:fixed; inset:0; z-index:2147483000;
  width:100vw; height:100dvh; max-height:none;
  border-radius:0; border:0;
}
/* sem isto a pagina de tras rola por baixo do mapa no celular */
html.mc-travado, html.mc-travado body{overflow:hidden}
/* quando e o navegador que esta em tela cheia, o elemento ja ocupa tudo */
.mc-raiz.mc-caixa.mc-expandido:fullscreen,
.mc-raiz.mc-cheio.mc-expandido:fullscreen{width:100%;height:100%}

/* no celular o rotulo sai e fica so o icone: o painel de versoes ja e apertado */
/* 820 e não 560: entre as duas larguras "Onde as propostas discordam" ainda empurrava a
   barra pra duas e até três linhas. O limiar é onde a barra cabe, não onde o telefone acaba */
@media (max-width:820px){.mc-so-largo{display:none}}
/* o par de .mc-so-largo: aparece só quando o outro some, pra frase curta começar com
   maiúscula ("Discordam") sem repetir a letra quando a longa está na tela */
.mc-so-estreito{display:none}
@media (max-width:820px){.mc-so-estreito{display:inline}}
/* célula que mudou em relação à coluna da esquerda */
.mc-t-m{background:var(--mc-hortensia-clara,#E4E8F5)}
/* o botão de sugestão se separa dos outros pela cor, como no resto do site */
.mc-adiante a.mc-sug{border-color:var(--mc-hortensia);background:rgba(93,111,181,.07)}

/* com o catalogo o painel passou de 12 para ~19 linhas e vai crescer mais:
   ganha rolagem propria em vez de escorrer por cima do mapa */
/* ----------------------------------------------- painel que abre e fecha */
/* Os dois paineis flutuam por cima do mapa. Fechados, sobra so o cabecalho -
   uma pilula - e o mapa aparece inteiro. */
.mc-cab{display:flex;align-items:center;gap:8px;width:100%;border:0;cursor:pointer;
  font:inherit;font-weight:700;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--mc-suave);background:transparent;
  padding:2px 0 6px;justify-content:space-between}
.mc-cab i{width:9px;height:9px;border-right:2px solid var(--mc-pedra);
  border-bottom:2px solid var(--mc-pedra);transform:rotate(45deg);
  transition:transform .15s;flex:none;margin-bottom:3px}
.mc-cab[aria-expanded=false] i{transform:rotate(-45deg);margin-bottom:0}
.mc-cab:focus-visible{outline:3px solid var(--mc-hortensia);outline-offset:2px}
.mc-painel.mc-fechado .mc-dentro{display:none}
/* fechado o painel encolhe pro tamanho do rotulo e para de limitar altura */
.mc-painel.mc-fechado{width:auto;max-width:none;height:auto;max-height:none;
  bottom:auto;padding:7px 12px}
.mc-painel.mc-fechado .mc-cab{padding:0;gap:10px}

.mc-extras{top:10px;right:10px;padding:9px 11px;font-size:12.5px;max-width:206px;
  max-height:calc(100% - 132px);overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain}
.mc-extras .mc-tit{margin:9px 0 3px}
.mc-extras>.mc-tit:first-child{margin-top:0}
.mc-extras label small{color:var(--mc-pedra)}
.mc-extras label.mc-fora{opacity:.4;cursor:not-allowed}
.mc-extras label{display:flex;gap:7px;align-items:flex-start;padding:3px 0;cursor:pointer;
  flex-wrap:wrap}
/* A etiqueta de versao ("só nas propostas") desce pra linha de baixo SO quando
   nao couber ao lado - flex:0 1 auto com min-width:0 deixa ela encolher antes
   de quebrar. Com flex:1 1 100% ela quebrava sempre e dobrava a altura de cada
   linha do painel no computador, onde havia espaco de sobra. */
.mc-extras label small{flex:0 1 auto;min-width:0}
.mc-extras input{margin-top:3px;accent-color:var(--mc-mata);width:15px;height:15px;flex:none}
.mc-tit{font-weight:600;font-size:11px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--mc-pedra);margin-bottom:4px}
/* precisa vencer `.mc-extras label{display:flex}`, que tem especificidade maior
   que uma classe sozinha; por isso o seletor comeca na raiz */
.mc-raiz .mc-extras .mc-so3d{display:none}
.mc-raiz.mc-tri .mc-extras .mc-so3d{display:flex}
.mc-raiz.mc-tri .mc-extras .mc-so2d{display:none}

/* LEGENDA FIXA, nao caixinha rolando.
   Antes ela tinha max-height:40% e rolava por dentro: so as zonas do Conselho
   ja pediam 759 px e recebiam 343. Agora ela vai do painel de versoes ate o
   rodape - 785 px - e fica mais larga, para o nome da zona caber numa linha so
   em vez de quebrar em duas. So com as zonas, que e o estado normal, ela NAO
   rola mais.

   Tentei antes deixar o conteudo transbordar em coluna (column-fill:auto), pra
   nunca rolar. Nao presta: com as 18 camadas ligadas, 73 dos 102 itens ficavam
   FORA da caixa, cortados sem aviso. Esconder em silencio e pior do que rolar.
   Entao a rolagem fica, como ultimo recurso de quem liga muita camada. */
.mc-legenda{top:62px;bottom:10px;left:10px;padding:9px 12px;
  font-size:12px;display:none;width:max-content;
  max-width:min(42%,306px);overflow-y:auto;overscroll-behavior:contain}
.mc-legenda{display:block}
.mc-legenda .mc-tit{margin:5px 0}
.mc-it{display:flex;gap:6px;align-items:center;padding:1px 0;line-height:1.35}
.mc-it i{width:14px;height:11px;border-radius:3px;flex:none;border:1px solid rgba(0,0,0,.18)}

.mc-ficha{position:absolute;z-index:15;right:10px;bottom:10px;width:328px;
  max-width:calc(100% - 20px);background:var(--mc-papel);border-radius:var(--mc-r);
  box-shadow:0 6px 26px rgba(0,0,0,.22);display:none;max-height:calc(100% - 20px);
  overflow:hidden;flex-direction:column}
.mc-ficha.mc-on{display:flex}
.mc-ficha .mc-cabeca{background:var(--mc-mata);color:#fff;padding:11px 13px;display:flex;
  justify-content:space-between;align-items:flex-start;gap:10px}
.mc-ficha .mc-cabeca h3{font-size:15px;font-weight:800;margin:0;color:#fff}
.mc-ficha .mc-cabeca p{font-size:11.5px;opacity:.85;margin:2px 0 0;color:#fff}
.mc-fechar{background:rgba(255,255,255,.18);border:0;color:#fff;width:26px;height:26px;
  border-radius:var(--mc-rp);cursor:pointer;font-size:16px;line-height:1;flex:none}
.mc-rolo{overflow-y:auto;padding:11px 13px 14px}
.mc-linha{display:flex;justify-content:space-between;gap:10px;padding:5px 0;
  border-bottom:1px solid var(--mc-neblina);font-size:13px}
.mc-linha span:first-child{color:var(--mc-pedra)}
.mc-linha span:last-child{font-weight:600;text-align:right}
.mc-bloco{margin-top:11px}
/* Levar isso adiante: a ficha do lote deixou de ser o fim da linha em 13/09/2026.
   Cada caminho é um alvo grande, porque no celular a ficha se lê com o polegar. */
.mc-adiante a{display:block;padding:9px 11px;margin-top:6px;border:1px solid var(--mc-linha,#dcdfd9);
  border-radius:10px;text-decoration:none;color:inherit;line-height:1.35}
.mc-adiante a:hover{border-color:var(--mc-mata,#2E7D5B);background:rgba(46,125,91,.05)}
.mc-adiante b{display:block;font-size:13.5px;font-weight:600}
.mc-adiante small{display:block;font-size:11.5px;color:var(--mc-pedra,#6b7280);margin-top:1px}
.mc-bloco>h4{font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--mc-pedra);margin:0 0 5px}
.mc-z{border-left:4px solid var(--mc-pedra-clara);padding:7px 9px;
  border-radius:0 10px 10px 0;background:var(--mc-neblina);margin-bottom:6px}
.mc-z.hoje{border-color:var(--mc-hoje)}
.mc-z.englert{border-color:var(--mc-englert)}
.mc-z.conselho{border-color:var(--mc-conselho)}
.mc-z .mc-cab{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.mc-z .mc-cod{font-weight:800;font-size:14.5px}
.mc-z .mc-qual{font-size:10.5px;color:var(--mc-pedra);text-transform:uppercase;letter-spacing:.05em}
.mc-z .mc-nm{font-size:11.5px;color:var(--mc-suave)}
.mc-ind{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.mc-ind b{background:var(--mc-papel);border:1px solid var(--mc-pedra-clara);
  border-radius:var(--mc-rp);padding:2px 8px;font-size:11px;font-weight:600}
.mc-ind b i{font-style:normal;color:var(--mc-pedra);font-weight:500}
.mc-aviso{background:var(--mc-alerta);border-radius:10px;padding:8px 10px;
  font-size:12px;margin-top:9px}
.mc-perigo{background:var(--mc-erro);border-radius:10px;padding:8px 10px;
  font-size:12px;margin-top:9px}
.mc-fonte{font-size:10.5px;color:var(--mc-pedra);margin-top:9px;line-height:1.45}
.mc-selo{display:inline-block;padding:1px 8px;border-radius:var(--mc-rp);
  font-size:10.5px;font-weight:600;border:1px solid rgba(0,0,0,.14)}
.mc-espera{position:absolute;inset:0;display:none;place-items:center;z-index:30;
  background:rgba(238,241,236,.92);font-size:13.5px;color:var(--mc-suave);
  text-align:center;padding:18px}
.mc-espera.mc-on{display:grid}
.mc-rodape{background:var(--mc-mata-escura);color:#cfd8d2;font-size:11px;
  padding:7px 12px;line-height:1.45;z-index:20;flex:none;cursor:pointer;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mc-rodape.mc-aberto{display:block;-webkit-line-clamp:none;max-height:34vh;overflow-y:auto}
.mc-rodape b{color:#fff}

@media (max-width:760px){
  .mc-raiz.mc-caixa{height:min(80vh,620px)}
  .mc-topo{padding:8px 9px;gap:8px}
  .mc-topo h2{display:none}
  .mc-versoes{padding:4px;top:8px;left:8px;right:8px;justify-content:center}
  .mc-versoes button{flex:1;padding:8px 3px;font-size:11.5px}
  .mc-versoes .mc-sep{display:none}
  /* ----------------------------------------------- painel que abre e fecha */
/* Os dois paineis flutuam por cima do mapa. Fechados, sobra so o cabecalho -
   uma pilula - e o mapa aparece inteiro. */
.mc-cab{display:flex;align-items:center;gap:8px;width:100%;border:0;cursor:pointer;
  font:inherit;font-weight:700;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--mc-suave);background:transparent;
  padding:2px 0 6px;justify-content:space-between}
.mc-cab i{width:9px;height:9px;border-right:2px solid var(--mc-pedra);
  border-bottom:2px solid var(--mc-pedra);transform:rotate(45deg);
  transition:transform .15s;flex:none;margin-bottom:3px}
.mc-cab[aria-expanded=false] i{transform:rotate(-45deg);margin-bottom:0}
.mc-cab:focus-visible{outline:3px solid var(--mc-hortensia);outline-offset:2px}
.mc-painel.mc-fechado .mc-dentro{display:none}
/* fechado o painel encolhe pro tamanho do rotulo e para de limitar altura */
.mc-painel.mc-fechado{width:auto;max-width:none;height:auto;max-height:none;
  bottom:auto;padding:7px 12px}
.mc-painel.mc-fechado .mc-cab{padding:0;gap:10px}

  .mc-extras{top:58px;right:8px;padding:8px 9px;font-size:11.5px;
    max-width:min(58%,190px);max-height:44%}

  /* no celular nao ha largura pra coluna: a legenda vira faixa embaixo e volta
     a rolar, que e o menos ruim numa tela de 375 px */
  .mc-legenda{top:auto;bottom:8px;left:8px;right:8px;max-width:none;
    max-height:34%}
  /* Fechada ela vira pilula e solta a largura toda. E PRECISA continuar presa
     embaixo: a regra geral do fechado solta o bottom - o que no computador e o
     certo, porque la a legenda mora no topo - mas aqui isso jogava a pilula em
     cima dos botoes de versao. */
  .mc-legenda.mc-fechado{right:auto;max-height:none;top:auto;bottom:8px}
  .mc-ficha{left:8px;right:8px;bottom:8px;width:auto;max-height:62%}
}

/* ============================================================ painel do lote v2 (13/09/2026)
   O painel passou de seis linhas soltas para tabela de três colunas. Num telefone ele não
   cabe inteiro: por isso a tabela rola de lado dentro do próprio bloco, e os dois últimos
   blocos nascem recolhidos. */
.mc-fatos{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:4px}
.mc-fatos>div{min-width:78px}
.mc-fatos b{display:block;font-family:var(--mc-titulo,inherit);font-size:17px;font-weight:800;
  line-height:1.1}
.mc-fatos small{display:block;font-size:11px;color:var(--mc-pedra);margin-top:2px}
.mc-fatos abbr{text-decoration:underline dotted;cursor:help}

.mc-leg{font-size:11.5px;color:var(--mc-pedra);margin:0 0 7px;line-height:1.4}
.mc-muda{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.mc-muda li{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:start;
  background:var(--mc-neblina);border-radius:10px;padding:8px 10px;font-size:12.5px;
  line-height:1.4}
.mc-muda b{color:var(--mc-mata)}

.mc-tabrolo{overflow-x:auto;margin:0 -2px}
.mc-tab{width:100%;border-collapse:collapse;font-size:12px}
.mc-tab th{text-align:right;font-weight:600;font-size:10px;letter-spacing:.03em;
  text-transform:uppercase;padding:5px 5px;border-bottom:2px solid var(--mc-linha,#dcdfd9);
  color:var(--mc-pedra);white-space:nowrap}
.mc-tab thead th small{display:block;font-size:10px;font-weight:700;text-transform:none;
  letter-spacing:0;color:var(--mc-tinta)}
.mc-tab tbody th{text-align:left;font-size:11.5px;font-weight:500;text-transform:none;
  letter-spacing:0;color:var(--mc-suave);white-space:normal;min-width:112px}
.mc-tab tbody th small{display:block;font-size:10px;color:var(--mc-pedra);font-weight:400}
.mc-tab td{padding:6px 5px;border-bottom:1px solid var(--mc-linha,#eceee9);text-align:right;
  vertical-align:top}
.mc-t-v{font-family:var(--mc-titulo,inherit);font-weight:700;font-size:12.5px;line-height:1.2}
.mc-t-v small{display:block;font-weight:400;font-size:10px;color:var(--mc-pedra);
  line-height:1.3;margin-top:1px}
.mc-t-falta{font-weight:500;font-size:11px;color:var(--mc-pedra);font-style:normal}
/* "caso a caso" não é número que falte, é o que a lei determina: fica com o peso das outras
   respostas, não com o cinza de "em conferência" */
.mc-t-lei{font-weight:600;font-size:11.5px}

.mc-pend{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:5px}
.mc-pend li{display:grid;grid-template-columns:14px 1fr;gap:7px;font-size:11.5px;
  color:var(--mc-suave);line-height:1.4}
.mc-pend li::before{content:"?";font-weight:800;color:var(--mc-hortensia)}

.mc-dobra{margin-top:11px}
.mc-dobra summary{cursor:pointer;font-size:11.5px;font-weight:600;color:var(--mc-suave)}
.mc-dobra[open] summary{margin-bottom:4px}