* { margin:0; padding:0; box-sizing: border-box;  }

/* Color variables */
:root {
    --azul-marinho: #131C3B;
    --azul: #0A6EB6;
    --bege: #F9EFE7;
    --verde: #98AB56;
    --terracota: #B76F51;

    /* Ícones em SVG inline, usados nos selects, no thumb do slider e no
       checkbox dos filtros (ver seção FILTROS abaixo). Ficam aqui como
       variável pra não repetir a mesma string enorme em cada regra —
       trocar a cor ou o desenho é só mudar aqui uma vez. */
    --icone-select-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Ccircle cx='11' cy='11' r='11' fill='%230A6EB6'/%3E%3Cpath d='M6 8.5L11 4.5L16 8.5' stroke='%23F9EFE7' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M6 13.5L11 17.5L16 13.5' stroke='%23F9EFE7' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    /* Mesmo ícone acima, mas o slider usa via `transform: rotate(90deg)`
       no próprio thumb (ver .filtro-grupo--slider ::-webkit-slider-thumb),
       não precisa de uma segunda variável só pra isso. */
    --icone-checkbox-marcado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='28' viewBox='0 0 34 28' fill='none'%3E%3Cpath d='M30.8674 6.98963C31.3245 7.53446 31.2535 8.34672 30.7086 8.80388L15.8835 21.2433C15.882 21.2446 15.8818 21.2468 15.8831 21.2483C15.8843 21.2498 15.8842 21.2521 15.8826 21.2534L12.5626 24.039C12.0178 24.4961 11.2056 24.425 10.7484 23.8802L3.22292 14.9117C2.76577 14.3669 2.83682 13.5547 3.3816 13.0975L5.71766 11.1372C6.26247 10.68 7.07476 10.751 7.53193 11.2958L11.4371 15.9499C11.8943 16.4947 12.7066 16.5658 13.2514 16.1086L27.0928 4.4946C27.6376 4.03746 28.4498 4.10852 28.907 4.65334L30.8674 6.98963Z' fill='%23B76F51'/%3E%3Cpath d='M25.9809 2.91157C27.2955 1.91742 29.155 2.08009 30.277 3.28743L30.3867 3.41159L32.3473 5.7481C33.49 7.11012 33.3124 9.14066 31.9505 10.2835L17.2414 22.6253C17.204 22.6623 17.1654 22.6987 17.1244 22.7331L13.8042 25.5188C12.4422 26.6615 10.4117 26.4839 9.2688 25.122L1.7432 16.1533C0.600385 14.7913 0.778068 12.7608 2.13999 11.6179L4.47617 9.65758L4.60578 9.55405C5.96422 8.52678 7.90443 8.73472 9.01162 10.0541L12.5029 14.2148L25.8513 3.01479L25.9809 2.91157ZM28.9071 4.6534C28.45 4.10859 27.6376 4.03752 27.0928 4.49467L13.2515 16.1086L13.1996 16.1498C12.6562 16.5608 11.88 16.4777 11.4372 15.9498L7.53203 11.2959C7.07486 10.7511 6.26249 10.68 5.71767 11.1371L3.38181 13.0975C2.83702 13.5546 2.76593 14.367 3.22307 14.9118L10.7484 23.8801C11.1912 24.4079 11.9674 24.4913 12.5108 24.0804L12.5628 24.0389L15.8826 21.2532L15.8835 21.2432L30.7087 8.80393C31.2535 8.34678 31.3246 7.5344 30.8674 6.98958L28.9071 4.6534Z' fill='%23F9EFE7'/%3E%3C/svg%3E");
}

.container { /*  container branco que ocupa a horizontal toda da tela */
    max-width: 1200px; 
    padding: 40px 20px; 
    margin: 0 auto; 
}

/* FILTROS */
.filtros-container { 
    display: flex; 
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center; 
    gap: 20px; 
    margin-bottom: 30px; 
    background: white; 
    padding: 20px; 
    border-radius: 15px; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
}

.filtro-grupo { 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
}

.filtro-grupo label,
.filtro-grupo__titulo {
    font-weight: 400;
    color: var(--azul-marinho);
    font-size: 0.95rem;
}

/* Estilo "pílula" comum a todos os selects nativos (Ordenar por, e o
   fallback de Contém o item em navegadores sem appearance: base-select).
   appearance: none tira a seta padrão do navegador pra dar lugar ao
   ícone customizado (--icone-select-seta, definido no :root acima). */
.filtro-grupo select { 
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 10px 44px 10px 16px;
    border-radius: 14px;
    border: 2px solid var(--azul);
    background-color: #fff;
    background-image: var(--icone-select-seta);
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 20px;
    font: inherit;
    font-weight: 400;
    font-size: 1rem;
    color: var(--azul-marinho);
    cursor: pointer;
}

/* Select "Contém o item" customizado (Chrome/Edge 135+, Safari 27+).
   Em navegadores sem suporte a appearance: base-select, essa regra é
   simplesmente ignorada e o <select> continua um dropdown nativo comum,
   já coberto pela regra ".filtro-grupo select" acima. */
#filtroEspecifico, #filtroEspecifico::picker(select) {
    appearance: base-select;
}

#filtroEspecifico {
    /* width (não max-width): trava o tamanho de verdade, não só um teto —
       max-width sozinho não impede o conteúdo de empurrar o texto pra uma
       segunda linha quando ultrapassa o espaço disponível.
       Border/background/padding NÃO são zerados aqui incondicionalmente —
       ver o bloco @supports logo abaixo pra entender o porquê. */
    width: 180px;
}

/* Isto só roda em navegadores que REALMENTE reconhecem a declaração
   "appearance: base-select" (Chrome/Edge mais recentes). Nesses casos, o
   <button> de dentro passa a ser quem desenha a pílula visível (regra
   abaixo), e manter a pílula do <select> por fora AO MESMO TEMPO duplicava
   borda e ícone (bug que já tivemos).
   Em navegadores sem suporte — Safari atual, Firefox, etc. — este bloco
   inteiro é ignorado e o <select> continua com a MESMA pílula da regra
   genérica ".filtro-grupo select" (borda azul, fundo branco, ícone). Sem
   este @supports, a única opção era escolher UMA borda pros dois casos —
   e escolher "sem borda" quebrava justamente quem mais precisa dela (o
   fallback nativo). */
@supports (appearance: base-select) {
    #filtroEspecifico {
        border: none;
        background: none;
        padding: 0;
    }
}

/* Quando o base-select está ativo, quem aparece de fato "fechado" é o
   <button> que já está dentro do <select> no HTML — por isso ele recebe
   a MESMA pílula visual da regra acima, e não o <select> em si. */
#filtroEspecifico > button {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    width: 100%;
    /* overflow:hidden aqui + min-width:0 no selectedcontent (abaixo) são
       o combo que faz o texto cortar com "…" em vez de quebrar linha */
    overflow: hidden;
    text-align: left;
    padding: 10px 44px 10px 16px;
    border-radius: 14px;
    border: 2px solid var(--azul);
    background-color: #fff;
    background-image: var(--icone-select-seta);
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 20px;
    font: inherit;
    font-weight: 400;
    font-size: 1rem;
    color: var(--azul-marinho);
    cursor: pointer;
}

/* selectedcontent espelha o conteúdo da <option> escolhida (ícone + nome
   do item). display:block (em vez de flex) é de propósito: texto e ícone
   viram um fluxo inline normal, e SÓ NESSE modelo o text-overflow:ellipsis
   funciona de verdade — dentro de um flex container o "…" não aparece,
   só o corte seco (testado, é uma pegadinha real do CSS). */
#filtroEspecifico > button selectedcontent {
    display: block;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#filtroEspecifico > button selectedcontent .opcao-icone {
    vertical-align: middle;
    margin-right: 6px;
}

#filtroEspecifico::picker(select) {
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 6px;
}

/* 2. Layout Grid aplicado APENAS quando o select é aberto */
#filtroEspecifico::picker(select):popover-open {
    display: grid;
    /* Usa repeat para as colunas e deixa as linhas automáticas */
    grid-template-columns: repeat(2, 1fr); 
    gap: 1rem;
}

#filtroEspecifico option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
}

#filtroEspecifico option:hover,
#filtroEspecifico option:focus {
    background: #f9efe7;
}

#filtroEspecifico option:checked {
    background: #0A6EB6;
    color: white;
}

.opcao-icone { 
    width: 18px; 
    height: 18px; 
    object-fit: contain; 
    flex-shrink: 0; /* o ícone não pode encolher quando o texto ao lado corta com "…" */
}


/* filtro slider */
.filtro-grupo--slider {
    min-width: 220px;
}

/* Slider nativo estilizado à mão (o "accent-color" sozinho não dá pra
   fazer a trilha em duas cores nem o thumb em losango, então aqui cada
   parte do range é montada via -webkit/-moz-*). O visual: trilha azul do
   início até o thumb, terracota do thumb até o fim — dá a sensação de
   "abaixo do mínimo" vs "acima do mínimo" só pela cor. */
.filtro-grupo--slider input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    /* gradiente dividido exatamente na posição do valor atual, atualizado
       via JS (ver atualizarPreenchimentoSlider() em app.js) */
    background: linear-gradient(
        to right,
        var(--azul) 0%,
        var(--azul) var(--posicao-slider, 10%),
        var(--terracota) var(--posicao-slider, 10%),
        var(--terracota) 100%
    );
    cursor: pointer;

    margin-top: 16px;
    margin-bottom: 18px;
}

/* Thumb = o mesmo ícone circular do select (--icone-select-seta), só que
   girado 90°: as setas que apontavam "abrir/fechar" viram "arrasta pra
   esquerda/direita", o que faz mais sentido num controle horizontal. */
.filtro-grupo--slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border: none;
    background-image: var(--icone-select-seta);
    background-repeat: no-repeat;
    background-size: contain;
    transform: rotate(90deg);
    cursor: pointer;
}

.filtro-grupo--slider input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border: none;
    background-color: transparent;
    background-image: var(--icone-select-seta);
    background-repeat: no-repeat;
    background-size: contain;
    transform: rotate(90deg);
    cursor: pointer;
}

.filtro-grupo--slider input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: transparent; /* a cor real vem do "background" no seletor base, Firefox só precisa disso transparente pra não desenhar por cima */
}

/* filtro "Mostrar praças" — os dois toggles lado a lado */
.filtro-grupo--toggles {
    justify-content: center; /* alinha o título com os labels dos outros grupos mesmo sendo mais alto */
}

.toggles-lista {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

/* O checkbox real continua no DOM (funciona com teclado, leitor de tela e
   o resto do código em app.js, que só olha .checked) — só fica invisível
   visualmente. O visual inteiro é feito pelo .toggle-trilho ao lado. */
.toggle-switch input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Apesar do nome (mantido pra não mexer no HTML), isto aqui não é mais
   uma trilha de switch — é a caixinha do checkbox: borda azul sempre,
   fundo branco vazio e fundo azul + ícone quando marcado. */
.toggle-trilho {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 16px;
    background-color: #fff;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 26px;
    border: 2px solid var(--azul);
    transition: background-color 0.15s ease, background-image 0.15s ease;

    margin-top: 6px;
    margin-bottom: 8px; 
}

.toggle-switch input:checked + .toggle-trilho {
    background-color: var(--azul);
    background-image: var(--icone-checkbox-marcado);
}

/* Anel de foco visível só na navegação por teclado (Tab), não no clique
   do mouse — evita o "anel feio" em quem só usa o mouse/touch. */
.toggle-switch input:focus-visible + .toggle-trilho {
    outline: 2px solid var(--azul-marinho);
    outline-offset: 3px;
}

.toggle-texto {
    font-weight: 500;
    color: var(--azul-marinho);
    white-space: nowrap;
}

.praca-comparativo .toggle-texto{
    color: var(--bege);
}

/* Selo "↻ remix" no canto do card — só aparece quando a praça tem
    praca_pai_id preenchido (ver desenharCards() em app.js) */
.card-praca {
    position: relative;
}

.card-remix-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(19, 28, 59, 0.82);
    color: #F9EFE7;
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 999px;
    pointer-events: none;
}

/* MOBILE: em vez de empilhar os filtros em várias linhas (ocupa muita
   altura) ou escondê-los atrás de um botão "Filtros" (exige um toque
   extra pra algo que a pessoa costuma ajustar toda hora), a barra vira
   uma faixa com scroll horizontal. O último grupo fica propositalmente
   cortado na borda da tela — esse corte É a dica visual de "tem mais pra
   o lado", sem precisar de texto ou seta explicando. Padrão parecido com
   os Stories do Instagram ou os chips de filtro do Google. */
@media (max-width: 780px) {
    .filtros-container {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        padding-right: 36px; /* deixa o início do último grupo visível, cortado */

        /* barra de rolagem escondida — a rolagem continua funcionando
           normalmente, só não desenha a barrinha cinza por cima do design */
        scrollbar-width: none;
    }

    .filtros-container::-webkit-scrollbar {
        display: none;
    }

    .filtro-grupo {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .filtro-grupo select,
    #filtroEspecifico > button {
        min-width: 170px;
    }

    .filtro-grupo--slider {
        min-width: 200px;
    }
}

/* GRID E CARDS */
.grid-galeria { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 25px; 
}

.card-praca { 
    background: white; 
    border-radius: 20px; 
    overflow: hidden; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
    cursor: pointer; 
    transition: transform 0.2s; 
}

.card-praca:hover { 
    transform: translateY(-5px); 
}

.card-img { 
    width: 100%; 
    height: 200px; 
    object-fit: cover; 
}

.card-info { 
    padding: 15px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.card-data { 
    font-size: 0.9rem; 
    color: #666; 
}

.card-likes { 
    display: inline-flex;
    align-items: center;
    gap: 4px; /* espaçamento entre o ícone e o número */
    font-weight: bold; 
    color: var(--terracota); 
}

.loading-spinner { 
    text-align: center; 
    padding: 40px; 
    color: #666; 
    font-style: italic; 
}

/* Links dos avisos de "sem resultados" / "fim da galeria" (ver
   mostrarAvisoSemResultados e mostrarAvisoFimDaGaleria em app.js) */
.loading-spinner a {
    display: inline-block;
    margin-top: 8px;
    color: var(--azul);
    font-style: normal;
    font-weight: bold;
    text-decoration: underline;
}

.loading-spinner a:hover {
    color: var(--azul-marinho);
}

/* MODAL (POPUP) */
#popup { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: rgba(0, 0, 0, 0.85); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    z-index: 1000; 
    transition: opacity 0.3s; 
}

#popup.escondido { 
    opacity: 0; 
    pointer-events: none; 
}

.popup-content { 
    background: white; 
    border-radius: 20px; 
    width: 90%; 
    max-width: 1200px; 
    /* aspect-ratio: 2 / 1;  */
    height: 85vh;
    max-height: 90vh; 
    display: flex; 
    flex-direction: row; 
    overflow: hidden; 
    position: relative; 
}

.btn-fechar { 
    position: absolute; 
    top: 15px; 
    right: 15px; 
    background: var(--terracota); 
    font-size: 1.2rem;
    color: var(--bege);
    border: none; 
    border-radius: 32px; 
    width: 45px; 
    height: 35px; 
    font-weight: bold; 
    cursor: pointer; 
    z-index: 10; 

    transition: width 0.3s;
}

.btn-fechar:hover { 
    width: 55px;
}

/* IMAGEM 1:1 (a de ângulo é 16:9, sobra vira barra preta com object-fit: contain) */
.popup-imagem-container { 
    flex: 0 0 50%; 
    /* aspect-ratio: 1 / 1; */ 
    background: #000; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    position: relative; 
}

#selectedImage { 
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
}

.toggle-vista { 
    position: absolute; 
    bottom: 20px; 
    left: 50%; 
    transform: translateX(-50%); 
    display: flex; 
    gap: 16px; 
}

.btn-vista { 
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 76px;
    height: 48px;
    padding: 0;

    border: none; 
    border-radius: 42px; 
    /* 1. Fundo base (inativo) fica sempre fixo aqui */
    background: linear-gradient(163deg, #FFF -41.94%, #FEF2E0 124.59%); 
    color: var(--azul);
    cursor: pointer; 

    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1;
}

/* 2. Camada ativa (fica por cima e transiciona a opacidade de 0 a 1 e de 1 a 0) */
.btn-vista::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(154deg, rgba(10, 110, 182, 0.70) 31.41%, rgba(10, 110, 182, 0.70) 44.7%, rgba(19, 28, 59, 0.70) 102.06%), linear-gradient(151deg, rgba(249, 239, 231, 0.70) 12.97%, rgba(183, 111, 81, 0.70) 100%), #131C3B;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

/* 3. ATENÇÃO: Nunca declare "background:" aqui dentro */
.btn-vista.ativo::before { 
    opacity: 1;
}

/* Efeito de Squish */
.btn-vista:active {
    transform: scale(0.92, 0.86);
}

.btn-vista svg {
    height: 24px;
    width: auto;
    max-width: 36px;
    display: block;
    position: relative;
    z-index: 1;
}

.btn-vista svg path {
    fill: var(--azul);
    transition: fill 0.3s ease;
}

.btn-vista.ativo svg path {
    fill: var(--bege);
}

/* SIDEBAR: header fixo em cima + abas embaixo */
.popup-sidebar { 
    flex: 1 1 50%;
     min-width: 0; 
     min-height: 0; 
     padding: 0; 
     overflow-y: auto; 
     display: flex; 
     flex-direction: column; 
     background: #fdfdfd; 
    }

.texto-dica { 
    color: #757575; 
    font-size: 0.9em; 
}

.sidebar-topo { 
    padding: 30px 30px 20px; 
    background: #f9efe7; 
    flex-shrink: 0; 
}

.sidebar-topo h2{
    margin: 0;
    font-weight: normal;
    text-align: left;
    font-size: 1.6rem;
}

.praca-numero { 
    font-weight: bold; 
    letter-spacing: 0.5px; 
    /* margin-bottom: 4px;  */
    margin: 0;
    font-size: 0.9rem;
}

.praca-base { 
    font-size: 0.9rem; 
    color: #757575; 
    margin-top: 2px; 
}

.popup-acoes { 
    display: flex; 
    gap: 10px; 
    align-items: stretch; 
    margin: 32px 0 12px 0; 
}

.btn-like { 
    padding: 12px 18px 12px 12px; 
    border-radius: 30px; 
    border: 2px solid var(--terracota); 
    background: white; 
    color: var(--terracota); 
    font-weight: bold; 
    cursor: pointer; 
    transition: 0.2s; 
    display: flex; 
    align-items: center; 
    gap: 6px; 
}

.btn-like span { 
    font-size: 1.2rem; 
    min-width: 1.2rem;
    text-align: right;
}

.btn-like svg { 
    width: 24px; 
    height: 24px; 
}

.btn-like svg path { 
    fill: var(--terracota); 
    transition: fill 0.2s;
}

.btn-like:hover, .btn-like.curtido { 
    background: var(--terracota); 
    color: white; 
}

.btn-like:hover svg path, .btn-like.curtido svg path { 
    fill: white; 
}

/* Animação com rotação e "pop" elástico */
@keyframes dancaCoracao {
    0%   { transform: scale(1) rotate(0deg); }
    20%  { transform: scale(0.75) rotate(-16deg); }
    45%  { transform: scale(1.35) rotate(14deg); }
    70%  { transform: scale(1.1) rotate(-8deg); }
    85%  { transform: scale(1.18) rotate(8deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* Dispara a dancinha apenas no SVG do botão */
.btn-like.animar svg {
    animation: dancaCoracao 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: center;
}

.btn-remix { 
    /* Layout */
    position: relative; /* diz à imagem absoluta para se guiar por este botão */
    display: flex; 
    align-items: center; 
    justify-content: center;
    flex: 1; 
    padding: 12px 50px 12px 20px; /* Mais padding na direita para o texto não ficar por baixo do lápis */
    
    /* Tipografia */
    color: #F9EFE7; 
    font-weight: bold; 
    text-decoration: none; 
    font-size: 1.2rem;
    
    background: linear-gradient(170deg, rgba(10, 110, 182, 0.7) 31.41%, rgba(10, 110, 182, 0.7) 44.7%, rgba(19, 28, 59, 0.7) 102.06%), 
                linear-gradient(151.35deg, rgba(249, 239, 231, 0.7) 12.97%, rgba(183, 111, 81, 0.7) 100%), 
                #131C3B;
    border-radius: 40px; 
    transition: 0.2s ease-in-out; 
}

.btn-remix img {
    position: absolute;
    /* Puxa a imagem para cima e encosta à direita */
    top: -15px; 
    right: 10%; 
    
    width: 64px;
    height: auto;
    
    transition: transform 0.2s ease-in-out;
}

.btn-remix:hover {
    filter: brightness(1.1);
}

.btn-remix:hover img {
    transform: rotate(-6deg) scale(1.3);
}

.btn-compartilhar {
    padding: 12px 18px;
    border-radius: 30px;
    border: 2px solid var(--azul);
    background: white;
    color: var(--azul);
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.btn-compartilhar:hover {
    background: var(--azul);
    color: white;
}

.btn-compartilhar.copiado {
    border-color: var(--verde);
    background: var(--verde);
    color: white;
}

/* ABAS ESTILO PASTA DE ARQUIVO */
.tabs-container { 
    display: flex; 
    flex-direction: column; 
    flex: 1; 
    min-height: 0; 
}

.tabs-header { 
    display: flex; 
    padding: 0 20px; 
    /* gap: 4px;  */
    align-items: flex-end;

    background: var(--bege); 
    height: 40px;
}

.tab-btn.ativo { 
    opacity: 1; 
}

.tab-btn { 
    border: none; 
    height: 100%;
    /* padding: 10px 30px 10px 17px;  */
    padding: 8px 20px;
    /* clip-path: polygon(0% 0%, 70% 0%, 100% 100%, 0% 100%); */
    clip-path: polygon(
        /* 1. Canto Inferior Esquerdo */
        0% 100%, 

        /* 2. Curva Suave no Topo Esquerdo (em torno dos 10%) */
        8.5% 15%, 
        9.2% 8%, 
        10% 3%, 
        11.5% 0.5%, 
        14% 0%, 

        /* 3. A linha reta do topo (começa aos 14% e vai até aos 86%) */
        86% 0%, 

        /* 4. Curva Suave no Topo Direito (em torno dos 90%) */
        86.5% 0.5%, 
        88% 3%, 
        88.8% 8%, 
        89.5% 15%, 

        /* 5. Canto Inferior Direito */
        100% 100%
    );

    font-weight: 700; 
    cursor: pointer; 
    color: white; 
    opacity: 0.7; 
    transition: all 0.2s ease-in-out; 

    font-size: 0.875rem;
}

.tab-btn:not(.ativo) { 
    transform: translateY(6px); 
}

.tab-btn.ativo { 
    padding: 14px 20px 10px;
    opacity: 1; 
}

.tab-itens { 
    background: var(--azul-marinho);
}

.tab-remixes { 
    background: var(--verde); 
}

.tab-historico { 
    background: var(--terracota); 
}

.tabs-conteudo { 
    flex: 1; 
    padding: 25px; 
    color: white; 
    overflow-y: visible; 

    z-index: 1;
}

.tabs-conteudo--itens {
    background: var(--azul-marinho); 
}

.tabs-conteudo--remixes { 
    background: var(--verde); 
}

.tabs-conteudo--historico { 
    background: var(--terracota); 
}

.tab-painel { 
    display: none; 
}

.tab-painel.ativo { 
    display: block; 
}

.estatisticas { 
    display: flex; 
    gap: 15px; 
    margin-bottom: 20px; 
}

.stat-box { 
    background: rgba(255,255,255,0.15); 
    padding: 15px; 
    border-radius: 12px;
    text-align: center; 
    flex: 1; 
}

.stat-numero { 
    display: block; 
    font-size: 1.5rem; 
    font-weight: bold; 
    color: white; 
}

.stat-label { 
    font-size: 0.75rem; 
    color: rgba(255,255,255,0.75); 
    text-transform: uppercase; 
}

.comentario-praca { 
    font-style: italic; 
    color: rgba(255,255,255,0.9); 
    background: rgba(255,255,255,0.1); 
    border-radius: 10px; 
    padding: 10px 14px; 
    margin-bottom: 16px; 
    font-size: 0.9rem; 
}

/* Grupos de itens por categoria, dentro da aba "itens" */
.grupo-categoria { 
    margin-bottom: 16px; 
}

.grupo-categoria-titulo { 
    font-size: 0.85rem; 
    color: rgba(255,255,255,0.8); 
    margin-bottom: 8px; 
}

/* Gráfico radar (praça original vs. praça imaginada) */
.radar-container {
    position: relative;
    width: 100%;
    height: 390px;
    margin-bottom: 16px;
}

.radar-container canvas {
    max-width: 100%;
}

/* lista de mudanças por item no cabeçalho de info de cada praça */
.toggle-lista-itens {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.75rem 0;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: var(--bege);
}

.toggle-seta {
    transition: transform 0.2s ease;
}

.toggle-lista-itens[aria-expanded="true"] .toggle-seta {
    transform: rotate(180deg);
}

/* truque de grid pra animar altura sem JS calculando pixels */
.lista-itens-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.lista-itens-wrapper.aberto {
    grid-template-rows: 1fr;
}

.lista-itens-wrapper > .lista-categorias {
    overflow: hidden;
    min-height: 0;
}

/* Lista comparativa por item, dentro de cada categoria */
.lista-comparativa {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.item-comparativo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: var(--bege);
    border-radius: 14px;
    padding: 10px 14px;
    color: #333;
}

.item-comparativo-nome {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    font-weight: bold;
    font-size: 0.9rem;
}

.item-comparativo-nome img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

.item-comparativo-nome span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-comparativo-dados {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.item-comparativo-dados > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
}

.item-comparativo-dados small {
    font-size: 0.65rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.item-comparativo-dados strong {
    font-size: 1rem;
    color: var(--azul-marinho);
}

.item-comparativo-dados > span.badge-diferenca {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.85rem;
    color: white;
}

.badge-diferenca.aumentou { background: var(--verde); }
.badge-diferenca.diminuiu { background: var(--terracota); }
.badge-diferenca.igual { background: #999; }

/* Abas "remixes" e "histórico" */
.lista-remixes, .lista-historico { 
    display: flex; 
    flex-direction: 
    column; gap: 10px; 
}

.remix-card, .historico-linha { 
    background: var(--bege);
    border-radius: 12px; 
    padding: 10px 14px; 
    color: #333; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.remix-card { 
    cursor: pointer; 
    transition: transform 0.15s; 
}

.remix-card:hover { 
    transform: translateY(-2px); 
}

.remix-vazio { 
    text-align: center; 
    padding: 30px 10px; 
    color: rgba(255,255,255,0.85); 
}

.remix-vazio a { 
    color: white; 
    font-weight: bold; 
}

/* Para telemóveis, o modal empilha a foto e os dados */
@media (max-width: 768px) {
    .btn-vista { 
        width: 54px;
        padding: 6px 10px;
    }

    .btn-vista img{
        height: 20px;
    }

    .toggle-vista {
        bottom: 10px;
    }

    .popup-content { 
        flex-direction: column; 
        aspect-ratio: auto; 
        height: 95vh; 
    }

    .popup-imagem-container { 
        flex: none; 
        width: 100%; 
        height: auto; 
        aspect-ratio: 1 / 1; 
        max-height: 38vh; 
    }

    .popup-sidebar { 
        flex: 1 1 auto; 
        min-height: 0; 
    }

    /* No mobile o espaço é curto demais pra ter cabeçalho fixo + scroll
       separado dentro da aba — deixa tudo (header + abas + conteúdo)
       rolar junto, como um painel só. */
    /* .tabs-conteudo { 
        overflow-y: visible; 
    } */
}

/* ==========================================
   CABEÇALHO DA PÁGINA DE UMA PRAÇA-BASE (praca.html)
   ========================================== */

.praca-cabecalho {
    background: white;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    padding: 30px;
    margin-bottom: 30px;
}

.praca-cabecalho h1 {
    margin: 0 0 12px;
    font-weight: normal;
    color: var(--azul-marinho);
}

.praca-intro {
    color: #444;
    line-height: 1.5;
    margin-bottom: 24px;
}

.praca-intro p {
    margin-bottom: 10px;
}

.praca-intro p:last-child {
    margin-bottom: 0;
}

.estatisticas-praca {
    display: flex;
    gap: 15px;
    margin-bottom: 24px;
}

.estatisticas-praca .stat-box {
    background: var(--bege);
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    flex: 1;
}

.estatisticas-praca .stat-numero {
    display: block;
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--azul-marinho);
}

.estatisticas-praca .stat-label {
    font-size: 0.75rem;
    color: #757575;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* O radar (desenharRadar) e a lista comparativa (criarListaComparativa)
   usam cores pensadas pra ficar em cima do fundo azul-marinho — é o mesmo
   visual de dentro do popup de cada praça — então aqui a gente recria
   esse fundo escuro pra combinar, sem precisar duplicar nenhum CSS deles. */
.praca-comparativo {
    background: var(--azul-marinho);
    border-radius: 16px;
    padding: 20px;
}

@media (max-width: 768px) {
    .estatisticas-praca {
        flex-wrap: wrap;
    }

    .estatisticas-praca .stat-box {
        flex: 1 1 calc(50% - 8px);
    }
}






/* ==========================================
   LISTA DE PRAÇAS-BASE (hub da galeria geral)
   ========================================== */

.praca-lista {
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    padding: 20px;
    margin-bottom: 30px;
}

.praca-lista h2 {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--azul-marinho);
    margin-bottom: 10px;
}

.praca-lista ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.praca-lista a {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    background: var(--bege);
    color: var(--azul-marinho);
    font-weight: bold;
    text-decoration: none;
    transition: 0.2s;
}

.praca-lista a:hover {
    background: var(--azul);
    color: white;
}