/* Paleta e cabecalho do RB LOG Viewer aplicados ao map-history.
 *
 * Folha de sobreposicao, carregada DEPOIS de styles.css: nenhuma linha do CSS
 * original foi editada, entao reverter e apagar o <link> do index.html.
 * A galeria de cards continua sendo a do projeto — so muda a moldura. */
:root {
    --rb-fundo:      #15181b;
    --rb-superficie: #1f2327;
    --rb-borda:      #343a40;
    --rb-texto:      #c2c7cd;
    --rb-texto-forte:#d5d9de;
    --rb-fraco:      #79818a;
    --rb-cinza:      #8b939b;
    --rb-verde:      #198754;   /* .btn-success do Bootstrap, como nas outras */
    --rb-verde-fundo:#157347;
    --rb-azul:       #5b91d6;
    --rb-realce:     #1b3554;   /* fundo do servidor escolhido, como no Viewer */
    --rb-vermelho:   #c4515c;
    --rb-foco-borda: #86b7fe;
    --rb-foco-glow:  rgba(13, 110, 253, .25);
    --rb-alt-controle: 38px;
    --rb-largura:    1180px;
}

body {
    background: var(--rb-fundo) !important;
    color: var(--rb-texto) !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--rb-azul); }

/* ---- cabecalho, no mesmo desenho das outras duas telas ---- */
.rb-topo { width: 100%; max-width: var(--rb-largura); margin: 0 auto; padding: 12px 16px 0; }
.rb-linha { display: flex; align-items: center; gap: 12px; }
.rb-linha-1 { flex-wrap: wrap; }
.rb-linha-2 { margin: 12px 0 6px; }

/* Os dois lados dividem o espaco que sobra em partes iguais, e o miolo fica
   com a largura do proprio conteudo. Antes a lista tinha `flex: 1` e os lados
   `flex: none`: o centro era o meio do que SOBRAVA, entao um nome de mapa mais
   longo a direita empurrava os botoes para a esquerda. */
.rb-marca { display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0; }
.rb-titulo { font-size: 17px; font-weight: 600; color: var(--rb-texto-forte); }
.rb-logo { display: block; line-height: 0; border-radius: 6px; }
.rb-logo img { display: block; transition: opacity .15s; }
.rb-logo:hover img { opacity: .75; }
.rb-logo:focus-visible { outline: 2px solid var(--rb-verde); outline-offset: 2px; }

/* servidores centralizados entre a marca e a direita */
.rb-servidores {
    display: flex; flex: 0 0 auto; justify-content: center; gap: 6px;
    list-style: none; margin: 0; padding: 0; flex-wrap: wrap;
}
.rb-srv {
    padding: 5px 12px;
    border: 1px solid var(--rb-borda);
    border-radius: 6px;
    background: var(--rb-superficie);
    color: var(--rb-texto);
    font-size: 13px;
    cursor: pointer;
}
/* !important e box-shadow: none porque o CSS original pinta .server-btn e
   .selected-server com gradiente azul (shorthand, que nao perde so pela
   ordem) e ainda poe uma sombra interna no selecionado. */
.rb-srv, .rb-srv:hover, .server-btn, .server-btn:hover, .selected-server {
    box-shadow: none !important;
    text-shadow: none;
}
.rb-srv:hover { background: var(--rb-superficie) !important; border-color: var(--rb-azul) !important; }
.rb-srv-ativo, .rb-srv-ativo:hover {
    background: var(--rb-realce) !important;
    border-color: var(--rb-azul) !important;
    color: #fff !important;
    font-weight: 600;
}

.rb-direita { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex: 1 1 0; min-width: 0; }
.rb-horario, .rb-agora { color: var(--rb-cinza); font-size: 13px; }
.rb-horario { font-variant-numeric: tabular-nums; }
.rb-horario b, .rb-agora b { color: var(--rb-texto-forte); }
/* pontinho pulsando: o mapa atual e estado ao vivo, nao historico */
.rb-agora #mapa-atual::before {
    content: "";
    display: inline-block;
    width: 7px; height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--rb-verde);
    animation: rb-pulsa 1.6s ease-in-out infinite;
}
.rb-agora.rb-parado #mapa-atual::before { background: var(--rb-fraco); animation: none; }
@keyframes rb-pulsa { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* ---- busca e botao de filtros ---- */
.rb-busca { display: flex; flex: 1; min-width: 260px; }
.rb-busca input, .rb-filtro-botao { box-sizing: border-box; }
.rb-busca input {
    flex: 1;
    height: var(--rb-alt-controle);
    padding: 0 14px;
    border: 1px solid var(--rb-borda);
    border-radius: 8px;
    background: var(--rb-fundo);
    color: var(--rb-texto);
    font-size: 14px;
    outline: none;
}
.rb-busca input::placeholder { color: var(--rb-fraco); }
.rb-busca input:focus {
    border-color: var(--rb-foco-borda);
    box-shadow: 0 0 0 .25rem var(--rb-foco-glow);
}
/* Duas caixas irmas, cada uma com a propria borda, como o btn-group do RB LOG
   Viewer: o rotulo verde a esquerda e a contagem em caixa escura a direita,
   emendadas por -1px para as bordas nao dobrarem de espessura. O botao em si
   nao desenha nada — so agrupa. */
.rb-filtro-caixa { display: inline-flex; align-items: stretch; height: var(--rb-alt-controle); }
.rb-filtro-caixa button { height: 100%; font-size: 14px; line-height: 1; cursor: pointer; box-shadow: none !important; }
.rb-filtro-rotulo {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 0 16px;
    border: 1px solid var(--rb-verde);
    border-radius: 8px 0 0 8px;
    background: var(--rb-verde);
    color: #fff;
}
.rb-filtro-rotulo:hover { background: var(--rb-verde-fundo); }
.rb-filtro-conta {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 42px; padding: 0 12px;
    margin-left: -1px;                       /* bordas emendadas, nao somadas */
    border: 1px solid var(--rb-verde);
    border-radius: 0 8px 8px 0;
    background: var(--rb-superficie);
    color: var(--rb-texto);
    font-variant-numeric: tabular-nums; font-weight: 700;
}
/* Mesmo comportamento do Log Viewer: em 0 fica inerte; com filtro, passar o
   mouse troca o numero por um x vermelho e o clique limpa tudo. */
.rb-filtro-conta:disabled { opacity: 1; color: var(--rb-fraco); cursor: default; }
.rb-filtro-conta.rb-tem-filtro { color: var(--rb-texto-forte); }
.rb-filtro-conta:hover:not(:disabled) {
    background: rgba(196, 81, 92, .18);
    border-color: var(--rb-vermelho);
    color: var(--rb-vermelho);
}
.rb-filtro-x { display: none; }
.rb-filtro-conta:hover:not(:disabled) .rb-filtro-n { display: none; }
.rb-filtro-conta:hover:not(:disabled) .rb-filtro-x { display: inline; }

/* as tags de modo sairam: os proprios botoes mostram o que esta escolhido.
   `[hidden]` sozinho nao bastaria — o `display: flex` do CSS original vence
   a folha do navegador, como aconteceu com o painel. */
#selected-gamemodes[hidden], #gamemode[hidden], #add-gamemode[hidden] {
    display: none !important;
}

/* Galeria alinhada com a barra de busca, nos DOIS lados.
   Duas coisas desalinhavam: a margem lateral de 20px do CSS original, e o
   `justify-content: center` com cards de 270px fixos — a fileira quase nunca
   fecha a linha exata, e a sobra se dividia nas duas pontas, afastando os
   cards das bordas.
   Grid com `auto-fill` + `1fr` resolve: o numero de colunas se adapta a
   largura e cada uma estica para fechar a linha, entao a primeira encosta na
   margem esquerda e a ultima na direita, como a barra de busca. A imagem usa
   object-fit: cover, entao ela recorta em vez de distorcer. */
#maps {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 16px;
    margin: 20px 0 !important;
}
/* a largura fixa do card cede para a coluna do grid */
#maps .map-card { width: auto !important; }

/* ---- painel recolhivel ----
   Imita o `collapse` do Bootstrap que o RB LOG Viewer usa: altura animada de
   0 ate a medida real do conteudo, e `auto` no fim para o painel poder crescer
   sozinho quando entram tags de modo. `overflow: hidden` durante a animacao,
   senao o conteudo vaza enquanto a altura ainda esta pequena. */
.rb-painel-colapso {
    overflow: hidden;
    height: 0;
    transition: height .35s ease;
}
.rb-painel-colapso.rb-aberto { height: auto; }
.rb-painel-colapso.rb-animando { overflow: hidden; }

/* `#filters-form` e seletor de ID e vence qualquer classe: sem repetir o id
   aqui, o `flex-direction: column` dele continuava valendo e o
   `flex: 1 1 320px` do primeiro grupo virava 320px de ALTURA — era o vao
   enorme no meio do painel. */
#filters-form.rb-painel-corpo {
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}
.rb-painel-corpo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    margin: 0 0 12px;
    padding: 16px;
    border: 1px solid var(--rb-borda);
    border-radius: 10px;
    background: var(--rb-superficie);
}
.rb-grupo { display: flex; flex-direction: column; gap: 5px; }
.rb-grupo-largo { flex: 1 1 320px; }
.rb-grupo > label { font-size: 11px; color: var(--rb-fraco); }
.rb-linha-campo { display: flex; gap: 6px; }
.rb-dica { font-size: 11px; color: var(--rb-fraco); font-style: italic; }

.rb-painel-corpo select,
.rb-painel-corpo input[type="number"] {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--rb-borda);
    border-radius: 8px;
    background: var(--rb-fundo);
    color: var(--rb-texto);
    font-size: 13px;
    outline: none;
}
.rb-painel-corpo select:focus,
.rb-painel-corpo input[type="number"]:focus {
    border-color: var(--rb-foco-borda);
    box-shadow: 0 0 0 .25rem var(--rb-foco-glow);
}
/* Botoes no desenho dos de comando do RB LOG Viewer: contorno colorido
   quando desligados, preenchidos quando ligados. O gradiente azul do CSS
   original perdia para isto por vir antes, mas `background` precisa de
   !important porque la ele e um shorthand com linear-gradient. */
.size-btn, .rb-modo {
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--rb-verde) !important;
    border-radius: 6px;
    background: transparent !important;
    color: var(--rb-verde) !important;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .12s, color .12s;
}
.size-btn:hover, .rb-modo:hover {
    background: var(--rb-verde) !important;
    color: #fff !important;
}
/* o CSS original poe sombra externa nos botoes e sombra INTERNA no
   selecionado; nenhuma das duas combina com o resto das telas */
.size-btn, .size-btn:hover, .size-btn.selected-size,
.rb-modo, .rb-modo:hover, .rb-modo.rb-modo-ativo,
.rb-btn-add, .specialbtn { box-shadow: none !important; }
.rb-modos { display: flex; flex-wrap: wrap; gap: 5px; }
#map-size-buttons { display: flex; gap: 6px; }
/* escolhido: preenchido, como o botao de comando marcado */
.size-btn.selected-size, .rb-modo.rb-modo-ativo {
    background: var(--rb-verde) !important;
    border-color: var(--rb-verde) !important;
    color: #fff !important;
}

/* tags de modo escolhido */
#selected-gamemodes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.gamemode-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 6px 3px 10px;
    border: 1px solid var(--rb-verde); border-radius: 999px;
    background: rgba(25, 135, 84, .16);
    color: var(--rb-texto-forte); font-size: 12px;
}
.remove-tag {
    display: inline-flex; align-items: center; justify-content: center;
    width: 17px; height: 17px; padding: 0;
    border: 0; border-radius: 50%;
    background: transparent; color: var(--rb-fraco);
    font-size: 11px; line-height: 1; cursor: pointer;
}
.remove-tag:hover { background: var(--rb-vermelho); color: #fff; }

/* switch igual ao das outras telas */
.rb-switch { display: flex; align-items: flex-start; gap: 9px; margin: 0; font-size: 13px; color: var(--rb-texto); cursor: pointer; }
.rb-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.rb-trilho {
    position: relative; flex: none; margin-top: 1px;
    width: 36px; height: 20px; border-radius: 10px;
    background: var(--rb-borda); transition: background-color .15s;
}
.rb-trilho::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--rb-cinza);
    transition: transform .15s, background-color .15s;
}
.rb-switch input:checked + .rb-trilho { background: var(--rb-verde); }
.rb-switch input:checked + .rb-trilho::after { transform: translateX(16px); background: #fff; }
.rb-switch input:focus-visible + .rb-trilho { outline: 2px solid var(--rb-verde); outline-offset: 2px; }
.rb-switch-texto { display: flex; flex-direction: column; gap: 2px; }

.rb-painel-acoes { display: flex; align-items: flex-end; gap: 8px; margin-left: auto; }
.rb-limpar, .rb-aplicar {
    height: 34px; padding: 0 18px;
    border-radius: 8px; font-size: 13px; cursor: pointer;
}
.rb-limpar { border: 1px solid var(--rb-borda); background: transparent; color: var(--rb-texto); }
.rb-limpar:hover { border-color: var(--rb-vermelho); color: var(--rb-vermelho); }
.rb-aplicar { border: 1px solid var(--rb-verde); background: var(--rb-verde); color: #fff; font-weight: 600; }
.rb-aplicar:hover { background: var(--rb-verde-fundo); }

/* ---- galeria ---- */
.container { max-width: var(--rb-largura); margin: 0 auto; padding: 0 16px; }
.bottom, .bottom p { color: var(--rb-fraco); }

/* Empilhado, cada bloco ocupa a linha inteira e vai para o MEIO — inclusive a
   marca. Com o titulo alinhado a esquerda e os servidores centrados, os dois
   pareciam pertencer a colunas diferentes. */
@media (max-width: 900px) {
    .rb-linha-1 { row-gap: 10px; }
    .rb-marca, .rb-servidores, .rb-direita {
        flex: 1 1 100%;
        width: 100%;
        justify-content: center;
    }
    .rb-marca { text-align: center; }
    .rb-linha-2 { flex-wrap: wrap; }
    .rb-painel-acoes { margin-left: 0; width: 100%; }
}


/* =========================================================================
   Painel expandido: mesma paleta e mesma estrutura de camadas do RB LOG
   Viewer, que e a referencia.

   O ponto principal e a PROGRESSAO de fundos, que aqui estava invertida:
       pagina  #15181b  ->  painel  #1b1e22  ->  campo  #1f2327
   Antes o painel era #1f2327 e o campo #15181b, ou seja, o campo ficava mais
   escuro que a caixa que o contem. Tambem cai a borda do painel: la ele se
   distingue do fundo pela cor, nao por contorno.

   Foco VERDE dentro do painel, e nao azul: o azul do Bootstrap fica na barra
   de busca principal; dentro do painel o Log Viewer usa o verde de acento.
   ========================================================================= */
:root {
    --rb-suave:       #1b1e22;   /* fundo do painel */
    --rb-borda-forte: #454c53;   /* borda de campo, um degrau acima da comum */
    --rb-verde-vidro: rgba(25, 135, 84, .15);
}

.rb-painel-corpo {
    padding: 14px 16px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--rb-suave) !important;
}

/* campos: mais claros que o painel, com borda mais marcada */
.rb-painel-corpo input,
.rb-painel-corpo select,
.rb-painel-corpo input[type="number"],
.rb-painel-corpo input[type="date"],
.rb-painel-corpo input[type="text"] {
    border: 1px solid var(--rb-borda-forte) !important;
    border-radius: 8px !important;
    background: var(--rb-superficie) !important;
    color: var(--rb-texto);
    box-shadow: none !important;
}
.rb-painel-corpo input:focus,
.rb-painel-corpo select:focus {
    border-color: var(--rb-verde) !important;
    box-shadow: 0 0 0 3px var(--rb-verde-vidro) !important;
}

/* botoes de acao do painel, iguais aos "Limpar" e "Aplicar" do Log Viewer */
.rb-limpar, .rb-aplicar { border-radius: 8px; }


/* Botoes de servidor: medidas identicas nas duas telas.
   No Historico de Mapas eles sao <button> e no Registros de Partidas sao <a>.
   Elemento diferente traz padrao diferente do navegador — <button> nao herda a
   fonte do corpo —, e no map-history o `.server-btn` original ainda impunha
   `font-weight: bold`. Declarando familia, peso e altura de linha nos dois,
   o resultado deixa de depender da tag. */
.rb-srv {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    border-radius: 6px;
}
.rb-srv-ativo { font-weight: 600; }


/* =========================================================================
   Cards de mapa, no desenho do resto do projeto.

   O card deixa de ser "imagem com texto por cima" e passa a ser um PAINEL,
   como as caixas das outras telas: superficie #1f2327, borda #343a40, canto
   de 10px. A imagem vira uma faixa no topo e o texto desce para baixo dela.

   Motivo de tirar o texto de cima da foto: para ele ficar legivel sobre
   qualquer imagem era preciso um degrade preto cobrindo metade do card — e o
   projeto inteiro e chapado, sem degrade nenhum. Com o texto fora da foto, a
   imagem aparece limpa e o texto ganha o contraste da superficie.

   Nada disso mexe no JS: sao os mesmos elementos que o script ja cria, so
   que `position: static` em vez de sobrepostos.
   ========================================================================= */

/* mais largo que alto: tres colunas em tela cheia, em vez de quatro quadrados */
#maps { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }

.map-card {
    display: flex;
    flex-direction: column;
    width: auto !important;
    /* Altura pelo conteudo. A altura fixa existia para o painel de modos, que
       era montado DENTRO do card: sem ela, abrir o painel empurrava a linha
       inteira do grid. Agora o painel abre em popup, fora do fluxo, entao nada
       se desloca — e o card para de reservar o espaco que ficava vazio. */
    height: auto !important;
    background: var(--rb-superficie) !important;
    border: 1px solid var(--rb-borda);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: none !important;
    transition: border-color .15s, transform .15s;
}
/* o scale(1.05) fazia o card invadir os vizinhos; aqui ele so sobe um fio e
   a borda acende, como os itens seleccionaveis das outras telas */
.map-card:hover {
    transform: translateY(-2px) !important;
    border-color: var(--rb-verde);
}

/* --- faixa de imagem --- */
.map-card img {
    flex: none;
    width: 100%;
    height: 112px !important;
    object-fit: cover;
    display: block;
    border-bottom: 1px solid var(--rb-borda);
}

/* --- cabecalho do card: nome + selo de tamanho + status --- */
.title-overlay {
    position: static !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    row-gap: 4px;
    padding: 9px 11px 10px !important;
    background: none !important;
    color: inherit !important;
    text-align: left !important;
}
.title-overlay p:first-child {
    flex: 1 1 auto;
    min-width: 0;                /* deixa o texto encolher em vez de esticar */
    margin: 0 !important;
    /* uma linha so: se um nome quebrasse em duas, aquele card ficaria mais
       alto e todos os vizinhos da linha ganhariam sobra embaixo */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--rb-texto-forte);
}
/* o segundo <p> e sempre o tamanho do mapa ("2 km"): vira selo, como os
   badges das outras telas */
.title-overlay p:nth-child(2) {
    flex: none;
    padding: 2px 10px;
    border: 1px solid var(--rb-borda);
    border-radius: 999px;
    font-size: 12.5px !important;
    font-weight: 500;
    color: var(--rb-cinza) !important;
}
/* o terceiro e a linha de status ("Rodou AAS ha 143 dias") */
.title-overlay p:nth-child(3) {
    flex: 1 1 100%;
    margin: 0 !important;
    font-size: 12px !important;
    color: var(--rb-fraco) !important;
}
/* o numero de dias e o dado que se procura na linha: sai do cinza de apoio */
.title-overlay p:nth-child(3) b { color: var(--rb-texto-forte); font-weight: 600; }
.small-title-text { margin: 0 !important; }

/* --- corpo: ultima vez que rodou cada modo --- */
.text-overlay {
    position: static !important;
    margin-top: auto;                    /* cola no fim, cards do mesmo tamanho */
    padding: 8px 12px 10px !important;
    background: none !important;
    backdrop-filter: none !important;
    border-top: 1px solid var(--rb-borda);
    color: var(--rb-texto) !important;
    text-align: left;
    overflow: hidden;          /* recolhido nao vaza para fora do card */
}
/* O bloco de "ultima vez que rodou os modos" nao fica mais sempre a mostra:
   aparece pelo botao de info e cobre o CARD INTEIRO. Cobrir tudo, e nao so a
   parte abaixo da imagem, e o que permite listar os sete modos sem barra de
   rolagem — que era o efeito colateral de espremer a lista em 120px. */
.text-overlay { display: none !important; }
/* Dentro do popup ele e conteudo comum: quem cuida de moldura, fundo e
   posicao e a caixa do popup. */
/* So aparece DENTRO do popup. Mesmo que um quadro escape entre a classe
   `detailed` entrar e o painel ser movido, nao ha o que piscar: dentro do card
   ele continua invisivel. */
.text-overlay.detailed { display: none !important; }
.rb-pop-corpo .text-overlay.detailed {
    display: block !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    overflow: visible !important;
}
/* O conteudo todo mora num <p> SO, com <br> entre as linhas — por isso
   estilizar `p:first-child` como rotulo jogava a caixa inteira em maiusculas
   e na cor apagada. O rotulo agora e o `.rb-rotulo` que o JS emite. */
.text-overlay p { font-size: 12px !important; margin: 2px 0 !important; }
.rb-rotulo {
    display: block;
    margin-bottom: 7px;
    color: var(--rb-fraco);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.detailed-info {
    margin-top: 8px !important;
    padding: 8px 10px !important;
    border: 1px solid var(--rb-borda) !important;
    border-radius: 8px !important;
    background: var(--rb-fundo) !important;
    color: var(--rb-texto) !important;
}

/* --- botao "Abrir mapa", sobre a faixa de imagem --- */
.map-card .map-button {
    top: 10px !important;
    right: 10px !important;
    padding: 4px 10px !important;
    border: 1px solid var(--rb-verde) !important;
    border-radius: 6px !important;
    background: var(--rb-verde) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 600;
    box-shadow: none !important;
}
.map-card .map-button:hover { background: var(--rb-verde-fundo) !important; }


/* --- botao de info, canto superior esquerdo do card --- */
.rb-info {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;                          /* acima do painel que ele abre */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--rb-borda);
    border-radius: 6px;
    background: var(--rb-superficie);
    color: var(--rb-cinza);
    cursor: pointer;
    box-shadow: none;
    transition: color .12s, border-color .12s, background-color .12s;
}
.rb-info:hover { color: var(--rb-texto-forte); border-color: var(--rb-verde); }
.rb-info-ativo {
    background: var(--rb-verde);
    border-color: var(--rb-verde);
    color: #fff;
}
.rb-info svg { display: block; }


/* O icone do link externo fica AO LADO do texto.

   Ele tinha ido parar embaixo por causa do `display: block` no proprio svg:
   o JS mostra o botao com `style.display = "block"` (estilo inline, que vence
   a folha), e num container em bloco um svg `display: block` ocupa a linha
   inteira. `inline-block` funciona nos dois casos — em bloco vira conteudo de
   linha, em flex continua sendo item de flex. O `nowrap` garante o resto. */
.map-card .map-button {
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.map-card .map-button svg {
    display: inline-block;
    vertical-align: -2px;
    flex: none;
}


/* =========================================================================
   Popup do botao de info.

   Mesma linguagem dos modais do RB LOG Viewer: escurecido por cima da pagina,
   caixa chapada na superficie do tema, cabecalho com titulo e X.
   ========================================================================= */
.rb-pop-fundo {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .55);
    animation: rb-pop-entra .12s ease-out;
}
.rb-pop-fundo[hidden] { display: none !important; }
body.rb-pop-ativo { overflow: hidden; }   /* o fundo nao rola atras do popup */

.rb-pop {
    width: 100%;
    max-width: 380px;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rb-borda);
    border-radius: 12px;
    background: var(--rb-superficie);
    color: var(--rb-texto);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
    animation: rb-pop-sobe .14s ease-out;
}
.rb-pop-topo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--rb-borda);
}
.rb-pop-titulo {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 600;
    color: var(--rb-texto-forte);
}
.rb-pop-fechar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--rb-borda);
    border-radius: 6px;
    background: transparent;
    color: var(--rb-cinza);
    cursor: pointer;
    transition: color .12s, border-color .12s;
}
.rb-pop-fechar:hover { color: var(--rb-texto-forte); border-color: var(--rb-verde); }
.rb-pop-corpo {
    padding: 12px 14px 14px;
    overflow-y: auto;
}
.rb-pop-corpo p {
    margin: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.75;
    color: var(--rb-texto) !important;
}
/* o nome do modo e o que se procura na linha */
.rb-pop-corpo b { color: var(--rb-texto-forte); font-weight: 600; }

@keyframes rb-pop-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes rb-pop-sobe {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}


/* =========================================================================
   Celular.

   A causa do corte era uma so: `.rb-topo` tem `width: 100%` MAIS `padding:
   0 16px`, e a folha original nunca declarou `border-box` — entao a faixa do
   cabecalho media 100% + 32px e empurrava a pagina inteira para fora da tela.
   Em desktop sobrava espaco e ninguem via; no celular cortava o contador de
   filtros e a linha do mapa atual. `border-box` global resolve na raiz, e e
   o que a propria folha original ja fazia caso a caso.
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

/* o botao escondido nao pode virar item de flex: `.rb-painel-acoes` e flex,
   e ja houve caso aqui de `display` declarado vencendo o `[hidden]` */
#filter-btn[hidden] { display: none !important; }

@media (max-width: 640px) {
    .rb-topo { padding: 10px 12px 0; }
    .container { padding: 0 12px; }

    .rb-linha-1 { gap: 8px; }
    .rb-titulo { font-size: 15px; }
    .rb-logo img { width: 38px; height: 38px; }
    .rb-agora { text-align: center; line-height: 1.6; }

    /* a busca toma a linha inteira e o botao de filtros vem embaixo, esticado:
       assim o contador nunca fica pendurado fora da tela */
    .rb-linha-2 { gap: 8px; }
    .rb-busca { flex: 1 1 100%; min-width: 0; }
    .rb-filtro-caixa { width: 100%; }
    .rb-filtro-rotulo { flex: 1 1 auto; justify-content: center; }
    .rb-filtro-conta { flex: 0 0 auto; }

    /* painel: uma coluna, cada grupo ocupando a largura toda */
    #filters-form.rb-painel-corpo { flex-direction: column !important; gap: 14px; }
    .rb-grupo, .rb-grupo-largo { flex: 1 1 auto; width: 100%; min-width: 0; }
    .rb-painel-corpo select,
    .rb-painel-corpo input[type="number"] { width: 100%; }
    #map-size-buttons .size-btn, .rb-modo { flex: 1 1 auto; }
    .rb-painel-acoes .rb-aplicar { width: 100%; }

    /* card unico por linha fica largo demais para uma faixa de 112px */
    .map-card img { height: 150px !important; }
    .rb-pop { max-width: 100%; }
}