/* 50-mapa-legenda.css — legenda do mapa, contador e overrides do MapLibre
   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ê. */
    /* ── LEGENDA ── */
    #legend {
      background: rgba(6, 13, 24, 0.93);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 14px;
      backdrop-filter: blur(14px);
      font-size: 11px;
      max-width: 420px;
    }
    /* Recolhida a caixa é só a tira do cabeçalho: o padding de leitura sobra
       e faria uma faixa alta e vazia em volta de uma linha de texto. */
    #legend.recolhida { padding: 7px 10px; }

    /* ── CABEÇALHO ── botão de recolher, e a única parte sempre visível. */
    .leg-head {
      display: flex;
      align-items: center;
      gap: 9px;
      width: 100%;
      padding: 0;
      background: none;
      border: 0;
      cursor: pointer;
      text-align: left;
      color: inherit;
      font: inherit;
    }
    .leg-head-tit {
      font-family: var(--display);
      font-size: var(--fs-rot);
      font-weight: var(--fw-rot);
      letter-spacing: 0.12em;
      color: var(--muted);
      flex-shrink: 0;
    }
    /* O resumo só existe recolhido — aberto, os próprios títulos das seções
       já estão logo abaixo, e repeti-los seria dizer duas vezes a mesma coisa. */
    .leg-head-resumo {
      font-family: var(--display);
      font-size: var(--fs-rot);
      letter-spacing: 0.06em;
      color: rgba(255, 255, 255, 0.55);
      /* Uma linha, sempre: a legenda recolhida não pode crescer para os lados
         nem quebrar em duas — deixaria de ser a tira que ela promete ser. */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
      flex: 1;
    }
    #legend:not(.recolhida) .leg-head-resumo { display: none; }
    #legend:not(.recolhida) .leg-head-tit { flex: 1; }
    .leg-head-chev {
      flex-shrink: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1;
      transition: transform 0.2s ease;
    }
    #legend.recolhida .leg-head-chev { transform: rotate(-90deg); }
    .leg-head:hover .leg-head-chev,
    .leg-head:hover .leg-head-tit { color: var(--text); }
    .leg-head:focus-visible { outline: 1px solid rgba(56, 189, 248, 0.6); outline-offset: 3px; border-radius: 4px; }

    .leg-corpo { margin-top: 9px; }
    #legend.recolhida .leg-corpo { display: none; }
    /* O primeiro título de seção traz margin-top próprio para separar-se do
       bloco anterior; logo abaixo do cabeçalho ele vira um vão duplicado. */
    .leg-corpo > .leg-sec:first-child { margin-top: 0 !important; }

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

    .leg-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 5px;
      color: var(--text);
    }

    .leg-box {
      width: 14px;
      height: 10px;
      border-radius: 2px;
      flex-shrink: 0;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* Legenda em duas colunas: lista de classes à esquerda, esquema de leitura
       à direita. O vão da direita já existia — as linhas de classe são curtas
       e a caixa acompanha a mais larga. Ocupá-lo evita esticar a legenda para
       baixo, que é o que mais atrapalha numa caixa que divide a tela com o
       mapa. */
    .leg-2col {
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }

    .leg-col-classes { flex: 0 0 auto; }

    .leg-2col .leg-col-classes .leg-row:last-child { margin-bottom: 0; }

    /* Ocupa o vão à direita das classes, com TETO. Sem o teto ele acompanhava
       a largura das notas de rodapé e virava a peça dominante da legenda —
       uma explicação de método não pode pesar mais que a escala de cores que
       ela explica. */
    .leg-diagrama {
      flex: 0 1 232px;
      max-width: 232px;
      padding-left: 13px;
      border-left: 1px solid rgba(255, 255, 255, 0.1);
      align-self: stretch;
    }

    .leg-diagrama svg { display: block; }

    .leg-diagrama-txt {
      font-size: 10px;
      color: var(--muted);
      line-height: 1.4;
      margin-top: 5px;
      text-align: center;
    }

    .leg-diagrama-txt b { color: rgba(255, 255, 255, 0.85); font-weight: 600; }

    /* Notas de rodapé da legenda, sob as duas colunas.
       O teto de largura é o que dimensiona o CARTÃO INTEIRO: sem ele estas
       frases longas iam numa linha só e esticavam a legenda muito além do que
       o conteúdo pede, deixando faixa escura sobrando à direita. Com o teto
       elas quebram em duas linhas e o cartão encolhe para o tamanho do que
       realmente mostra. */
    .leg-nota {
      font-size: 10px;
      color: var(--muted);
      line-height: 1.4;
      margin-top: 6px;
      max-width: 372px;
    }

    .leg-nota b { color: rgba(255, 255, 255, 0.85); font-weight: 600; }
    .leg-nota b.fraco { color: rgba(255, 255, 255, 0.55); }

    /* ── COUNTER ── */
    #counter {
      position: absolute;
      top: 14px;
      left: 14px;
      background: rgba(6, 13, 24, 0.93);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 14px;
      backdrop-filter: blur(14px);
      z-index: 10;
      font-size: 11px;
      font-family: var(--display);
      line-height: 1.8;
    }

    #counter span {
      color: var(--muted);
      font-size: 10px;
    }

    

    /* ── MAPLIBRE overrides ── */
    .maplibregl-popup-content {
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      padding: 0 !important;
      box-shadow: none !important;
    }

    .maplibregl-popup-tip {
      display: none !important;
    }

    .maplibregl-popup-close-button {
      color: var(--muted) !important;
      top: 6px !important;
      right: 8px !important;
      font-size: 15px !important;
      z-index: 2;
    }

    .maplibregl-popup-close-button:hover {
      color: var(--text) !important;
    }

    .pu-tag {
      font-family: var(--display);
      font-size: 9px;
      letter-spacing: 0.1em;
      margin-bottom: 5px;
      padding: 2px 7px;
      border-radius: 4px;
      display: inline-block;
    }

    .pu-row {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      margin-top: 3px;
      font-size: 11px;
    }

    .pu-row .k {
      color: #94a3b8;
    }

    .pu-row .v {
      color: #dde8f8;
      font-weight: 600;
    }

    .maplibregl-ctrl-group {
      background: var(--surface) !important;
      border: 1px solid var(--border) !important;
      border-radius: 8px !important;
    }

    .maplibregl-ctrl-group button {
      background: transparent !important;
    }

    .maplibregl-ctrl-attrib {
      background: rgba(6, 13, 24, 0.8) !important;
      color: var(--muted) !important;
      font-size: 9px !important;
    }

    .maplibregl-ctrl-attrib a {
      color: var(--muted) !important;
    }

    /* Tooltips (?) — usados em painéis e no Dashboard */
    .vgv-tip  { position:relative; display:inline-flex; align-items:center; cursor:help; margin-left:5px; }
    .hero-tip { position:relative; display:inline-flex; align-items:center; cursor:help; margin-left:5px; }
    .vgv-tip svg, .hero-tip svg { opacity:0.55; transition:opacity 0.15s; }
    .vgv-tip:hover svg, .hero-tip:hover svg { opacity:1; }
    .vgv-tip-box, .hero-tip-box { display:none; }

    /* ── MINIMIZAR OS OVERLAYS DA COLUNA ESQUERDA ─────────────────────────
       Painel de indicadores e pilha de legendas dividem a mesma faixa
       vertical; _ajustaColunaFlutuante() (js/32-painel-eu.js) reparte a
       altura entre os dois, e estas classes são o estado dobrado de cada um. */
      /* O ✕ saiu do cabeçalho: era um fechar que não fechava. `closeQuickInfo()`
         só faz display:none e o próximo refreshIndicatorSummary() termina em
         display:'block', então qualquer indicador ligado trazia o painel de
         volta. Ficou só o minimizar, que PERSISTE — a classe mora na caixa de
         fora, que o innerHTML do corpo não toca. A função segue existindo para
         `closePanel()`, que a chama.
         O painel é ancorado no TOPO e cresce para baixo, então o chevron é ▴
         (dobra para cima) e vira ▾ ao reabrir. */
      #eu-quickinfo.qi-min{max-height:none !important;overflow:visible;}
      #eu-quickinfo.qi-min #eu-quickinfo-body{display:none;}
      #eu-quickinfo.qi-min #eu-quickinfo-header{margin-bottom:0;}
      #eu-quickinfo-n{font-family:var(--display);font-size:9px;color:var(--muted);
        opacity:.75;white-space:nowrap;display:none;}
      #eu-quickinfo.qi-min #eu-quickinfo-n{display:inline;}
      #eu-quickinfo .qi-btn{background:transparent;border:none;color:var(--muted);
        cursor:pointer;line-height:1;padding:0 4px;transition:transform .2s,color .15s;}
      #eu-quickinfo .qi-btn:hover{color:#fff;}
      #eu-quickinfo.qi-min .qi-min-btn{transform:rotate(180deg);}

        /* Quando _ajustaColunaFlutuante() limita a altura da pilha, ela rola por
           dentro.
           O flex-shrink:0 é o que FAZ a rolagem existir: sem ele os cards são
           itens flex e, com a altura do container limitada, ENCOLHEM em vez de
           transbordar — o conteúdo saía cortado no meio do card e o
           scrollHeight ficava igual ao clientHeight, ou seja, não havia nada
           para rolar. */
        #legends-wrap{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;}
        #legends-wrap > *{flex-shrink:0;}