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

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

body { 
    background-color: var(--bege); 
    color: black; 
    font-family: 'Cabin', sans-serif;
}

header { 
    background-color: var(--azul); 
    border-radius: 0 0 30px 30px; 
    text-align: 
    center; padding: 20px; 
}

.img-logo { 
    max-width: 100%; 
    height: auto; 
}

.container { 
    max-width: 1200px; 
    padding: 40px 20px; 
    margin: 0 auto; 
}

/* FILTROS */
.filtros-container { 
    display: flex; flex-wrap: 
    wrap; 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: 5px; 
}

.filtro-grupo select { 
    padding: 8px; 
    border-radius: 8px; 
    border: 1px solid #ccc; 
    font-size: 1rem; 
}

/* 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,
   com o texto das opções (o <img> do ícone é descartado sozinho). */
#filtroEspecifico, #filtroEspecifico::picker(select) {
    appearance: base-select;
}

#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; 
}

/* 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 { 
    font-weight: bold; 
    color: #e63946; 
}

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

/* 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: 8px; 
}

.btn-vista { 
    padding: 8px 16px; 
    border: none; 
    border-radius: 20px; 
    background: rgba(255,255,255,0.85); 
    color: #0A6EB6; font-size: 0.85rem; 
    font-weight: bold; 
    cursor: pointer; 
    transition: 0.2s; 
}

.btn-vista.ativo { 
    background: #0A6EB6; 
    color: white; 
}

/* 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;
}

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

.praca-base { 
    font-size: 0.85rem; 
    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; 
}

.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: auto; 

    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: 340px;
    margin-bottom: 16px;
}

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

/* 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) {
    .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; 
    }
}