/* style.css */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap'); /* Importa a fonte Quicksand do Google Fonts */

* {
    box-sizing: border-box; /* Garante que padding e border não aumentem o tamanho total do elemento */
}

:root {
    --primary-color: #8ab4f8; /* Cor primária (azul claro) */
    --secondary-color: #fffafa; /* Cor secundária (cinza claro) */
    --tertiary-color: #9aa0a6; /* Cor terciária (cinza médio) */
    --bg-color: #ffffff8e; /* Cor de fundo (cinza escuro) */
    --ticker-height: 2.5rem; /* Altura do letreiro para cálculos de posicionamento */
}

/* --- MODO CLARO --- */
body.light-mode {
    --primary-color: #0d6efd; /* Azul mais escuro para contraste */
    --secondary-color: #212529; /* Texto escuro */
    --tertiary-color: #6c757d; /* Cinza para texto secundário */
    --bg-color: #f8f9fa; /* Fundo de inputs e outros elementos */

    background: #f0f2f5; /* Fundo principal claro */
    color: var(--secondary-color);
}

body.light-mode header,
body.light-mode .card, body.light-mode .card-hero {
    background-color: #ffffff; /* Fundo branco para header e cards */
}

/* Garante que os títulos dos cards fiquem escuros no modo claro */
body.light-mode .card-text-content h1,
body.light-mode .card-text-content h2 {
    color: var(--secondary-color);
}

/* Garante que o texto do resumo no modo claro também seja escuro */
body.light-mode .summary-tooltip,
body.light-mode .modal-content {
    color: var(--secondary-color);
}
/* Estilos do Letreiro de Notícias */
body {
    margin: 0; /* Remove a margem padrão do body */
    background: #0f2027; /* Fundo sólido para melhor performance */
    color: var(--secondary-color); /* Define a cor do texto padrão usando uma variável */
    font-family: "Quicksand", sans-serif; /* Define a família da fonte */
    overflow-x: hidden; /* Impede a rolagem horizontal em todo o site */
}

header {
    padding: 5.5rem 3.5rem; /* Espaçamento interno aumentado */
    display: flex; /* Habilita o layout flexbox */
    align-items: center;
    justify-content: flex-end; /* Alinha os ícones à direita */
    position: fixed; /* Fica fixo no topo da página */
    top: 0;
    width: 100%;
    background-color: #305764; /* Cor de fundo do cabeçalho */
    z-index: 10; /* Garante que o header fique acima do conteúdo principal */
    isolation: isolate; /* Cria um novo contexto de empilhamento */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Sombra aprimorada para maior profundidade */
}


header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1; /* Coloca o banner atrás do conteúdo do header */
    background-image: url('assets/logo.png'); /* Adiciona o logo como imagem de fundo */
    background-size: 480px; /* Define um tamanho fixo para o logo */
    background-position: center; /* Centraliza a imagem horizontal e verticalmente */
    background-repeat: no-repeat; /* Garante que a imagem não se repita */
    opacity: 0.8; /* Leve transparência para integrar melhor ao fundo */
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-actions button {
    background: transparent;
    border: none;
    color: var(--secondary-color);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    transition: color 0.2s, transform 0.2s;
}

.header-actions button:hover {
    color: var(--primary-color);
    transform: scale(1.1);
}

/* --- BOTÃO SELETOR DE TEMA --- */
#theme-toggle-btn {
    position: fixed; /* Posição fixa na tela */
    bottom: 90px; /* Distância do fundo, igual ao botão de topo */
    left: 30px; /* Distância da esquerda */
    z-index: 999; /* Garante que fique sobre outros elementos */
    border: none;
    outline: none;
    background-color: var(--primary-color);
    color: #0f2027;
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Deixa o botão circular */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

#theme-toggle-btn:hover {
    background-color: #a1c4fd; /* Um tom um pouco mais claro no hover */
    transform: scale(1.1);
}

/* Ícones de Sol e Lua (usando Font Awesome) */
#theme-toggle-btn::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: '\f185'; /* Ícone de Sol */
}
body.light-mode #theme-toggle-btn::before {
    content: '\f186'; /* Ícone de Lua */
}

/* --- FILTROS --- */
.filters-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    flex-wrap: wrap;
    padding: 0 1rem;
}

.filters-panel-body #additional-filters {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}

.filters-panel-body label {
    font-size: 0.9rem;
    color: var(--tertiary-color);
    margin-bottom: -1rem; /* Aproxima o label do seu input */
}

/* Aplica o mesmo estilo do dropdown personalizado aos selects padrão */
.custom-filter-style {
    position: relative; /* Necessário para o posicionamento da seta */
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    border-radius: 1rem;
    border: 1px solid var(--tertiary-color);
    background-color: #0f2027; /* Fundo igual ao da página principal */
    color: var(--secondary-color); /* Usa a variável de cor do tema */
    transition: border-color 0.2s;
    font-weight: 500;
    cursor: pointer;
}

/* --- ESTILOS DO DROPDOWN PERSONALIZADO DE FONTES --- */
.custom-select-wrapper {
    position: relative;
    display: inline-block;
    user-select: none;
    width: 100%;
    font-family: inherit;
}

.custom-select {
    position: relative;
}

.custom-select-trigger {
    /* A maioria dos estilos foi movida para .custom-filter-style */
}

/* Estilos para o <select> que não são aplicados ao trigger */
.filter-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: inherit; /* Garante que a fonte seja a mesma */
}

/* Seta para todos os filtros */
.custom-filter-style::after {
    content: '';
    position: absolute;
    right: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%239aa0a6' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

.custom-filter-style:hover {
    border-color: var(--primary-color);
}

.custom-select.open .custom-filter-style::after {
    transform: translateY(-50%) rotate(180deg);
}

.custom-options {
    position: absolute;
    display: none;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    background-color: #2c5364;
    border: 1px solid var(--tertiary-color);
    border-radius: 1rem;
    z-index: 10;
    max-height: 250px;
    overflow-y: auto;
}

.custom-select.open .custom-options {
    display: block;
}

.custom-option {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    color: var(--secondary-color);
    cursor: pointer;
    transition: background-color 0.2s;
}

.custom-option:hover {
    background-color: var(--primary-color);
    color: #0f2027;
}

.custom-option img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    object-fit: contain;
    border-radius: 3px;
}
/* Os estilos para #category-filters e .filter-button foram removidos para que o filtro de categoria se comporte como um <select> padrão, igual ao de fontes. */

.filter-button {
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    border: 1px solid var(--tertiary-color);
    background-color: transparent;
    color: var(--secondary-color);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    width: 100%;
}

.filter-button.active, .filter-button:hover {
    background-color: var(--primary-color);
    color: #0f2027;
    border-color: var(--primary-color);
    font-weight: 600;
}

/* --- BOTÃO LIMPAR FILTROS --- */
#clear-filters-btn {
    padding: 0.6rem 1.2rem;
    border-radius: 1rem;
    border: 1px solid #c53929; /* Tom de vermelho para a borda */
    background-color: transparent;
    color: #ff8a80; /* Tom de vermelho claro para o texto */
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    font-weight: 500;
    white-space: nowrap; /* Impede que o texto quebre */
}

#main-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

/* Estilos para o Dropdown "Mais" */
.dropdown {
    position: relative;
    display: inline-block;
}
/* Inicialmente, o dropdown "Mais" é oculto em telas maiores */
.dropdown { display: none; }

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #2c5364;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 0.5rem;
    border: 1px solid var(--tertiary-color);
    margin-top: 0.5rem;
    max-height: 200px; /* Altura máxima antes de habilitar a rolagem */
    overflow-y: auto; /* Adiciona rolagem vertical se o conteúdo exceder a altura máxima */
}

.dropdown-content a {
    color: var(--secondary-color);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    transition: background-color 0.2s;
}

.dropdown-content a:hover {
    background-color: var(--primary-color);
    color: #0f2027;
}

.show {
    display: block;
}

#more-filters-button.active {
    background-color: var(--primary-color);
    color: #0f2027;
    border-color: var(--primary-color);
    font-weight: 600;
}

.main-container {
    padding: 2rem;
    padding-bottom: 6rem; /* Espaço para o rodapé fixo */
    max-width: 1400px;
    margin: 0 auto;
}

main {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* Grid de 12 colunas */
    gap: 2rem;
}

.sidebar {
    position: fixed; /* Fixo na tela, como um widget */
    bottom: 14rem; /* Distância do fundo */
    left: 2rem; /* Mantém a distância da esquerda */
    width: 360px; /* Largura do widget */
    height: 500px; /* Altura do widget */    
    background-color: rgba(30, 42, 51, 0.85); /* Fundo escuro com 85% de opacidade */
    border-radius: 1rem; /* Bordas arredondadas */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5); /* Sombra para efeito de flutuação */ 
    z-index: 10; /* Ajustado para ficar acima dos cards, mas abaixo de outros elementos flutuantes */
    padding: 1rem;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--tertiary-color);    
    backdrop-filter: blur(5px); /* Efeito de vidro fosco no fundo */
    transition: width 0.4s ease, padding 0.4s ease; /* Adiciona transição suave */
    overflow: hidden; /* Esconde o conteúdo que transborda durante a transição */
}

.sidebar h3 {
    text-align: center;
    margin-bottom: 1rem;
    cursor: move; /* Indica que o elemento pode ser movido */
    user-select: none; /* Impede a seleção de texto ao arrastar */
    white-space: nowrap; /* Impede que o título quebre a linha */
    transition: opacity 0.3s ease;
}

/* --- ESTILOS DO WIDGET RECOLHÍVEL --- */
.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.5rem; /* Ajusta o padding do cabeçalho */
}

.sidebar-toggle-btn {
    background: transparent;
    border: none;
    color: var(--secondary-color);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.sidebar-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Estado recolhido do widget */
.sidebar.collapsed {
    width: 60px; /* Largura suficiente para o botão */
    padding: 1rem 0;
    cursor: pointer; /* Indica que pode ser expandido ao clicar */
}
/* Estilos do Letreiro de Notícias */
.ticker-wrap {
    position: fixed; /* Fixa o letreiro na tela */
    /* O 'top' agora é definido dinamicamente via JavaScript */
    z-index: 9; 
    width: 100%;
    background-color: #0f2027;
    height: var(--ticker-height); /* Altura definida pela variável */
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border-bottom: 1px solid var(--tertiary-color);
    display: flex; /* Habilita o flexbox para alinhamento */
    align-items: center; /* Centraliza o conteúdo (o ticker) verticalmente */
}

#news-ticker {
    display: inline-block;
    white-space: nowrap;
}

.ticker-content {
    display: inline-block;
    animation: ticker-scroll 60s linear infinite;
}

.ticker-item {
    display: inline-block;
    padding: 0 2rem;
    font-size: 1rem;
    color: var(--secondary-color);
}

@keyframes ticker-scroll {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%); /* Ajustado para um loop mais suave se o conteúdo for duplicado via JS, mas funciona bem assim */
    }
}

/* Esconde o conteúdo do widget quando recolhido, exceto o cabeçalho */
.sidebar.collapsed > *:not(.sidebar-header) {
    opacity: 0;
    visibility: hidden;
}

/* Define a animação de fade-in para os cards */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px); /* Começa um pouco abaixo */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* Termina na posição final */
    }
}
.card, .card-hero {
    background-color: #2c5364; /* Fundo escuro para a área de texto do card */
    border-radius: 0.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
    display: flex;
    flex-direction: column;
    /* Aplica a animação de fade-in */
    animation: fadeIn 0.6s ease-out forwards;
    position: relative; /* Essencial para posicionar o tooltip ao lado */
}

/* Classe para controlar a transição de desaparecimento dos cards */
.card-hidden {
    opacity: 0;
    transform: scale(0.95);
    /* O display: none será adicionado via JS após a transição, mas a transição inicial é controlada aqui */
}

.card:hover, .card-hero:hover {
    transform: translateY(-5px); /* Efeito de levantar o card */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Adiciona sombra interna quando o tooltip de resumo está ativo */
.card:has(.summary-container.show-tooltip),
.card-hero:has(.summary-container.show-tooltip) {
    /* Combina a sombra interna com a sombra externa para manter o efeito de elevação */
    box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.5), 0 8px 25px rgba(0, 0, 0, 0.3);
    /* Eleva o card ativo acima dos outros para que o tooltip não seja cortado */
    z-index: 5; 
}

/* Garante que o card de destaque também seja elevado */
.card-hero:has(.summary-container.show-tooltip) {
    z-index: 5;
}
.card-hero {
    grid-column: span 12; /* Ocupa todas as 12 colunas */
}
.card {
    grid-column: span 4; /* Cada card ocupa 4 colunas (3 por linha) */
}

/* Adiciona um atraso escalonado na animação para cada card */
.card:nth-child(2) { animation-delay: 0.1s; }
.card:nth-child(3) { animation-delay: 0.2s; }
.card:nth-child(4) { animation-delay: 0.3s; }
.card:nth-child(5) { animation-delay: 0.4s; }
.card:nth-child(6) { animation-delay: 0.5s; }
.card:nth-child(7) { animation-delay: 0.6s; }
/* Você pode adicionar mais regras se houver mais cards visíveis inicialmente */



.card-link {
    text-decoration: none;
    color: var(--secondary-color); /* Cor de texto clara */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.image-container {
    overflow: hidden; /* Garante que o zoom da imagem não ultrapasse as bordas */
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    position: relative; /* Cria um contexto de empilhamento */
    z-index: 1; /* Define a imagem como a camada de baixo */
}

.card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.4s ease; /* Transição suave para o zoom */
}

.card:hover .card-image,
.card-hero:hover .card-image {
    transform: scale(1.1); /* Aumenta o zoom da imagem no hover */
}

.card-hero .card-image {
    height: 400px; /* Imagem maior para a notícia de destaque */
}

.card-text-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Faz o conteúdo de texto ocupar o espaço restante */
    position: relative; /* Cria um contexto de empilhamento */
    z-index: 2; /* Define o texto (e o resumo) como a camada de cima */
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.card-text-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Faz o conteúdo de texto ocupar o espaço restante */
    /* position: relative;  <-- REMOVIDO para não prender o resumo */
    /* z-index: 2;          <-- REMOVIDO */
}

.card-text-content h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
}

.card-hero .card-text-content h2 {
    font-size: 2.2rem;
}
/* Estilo para o crédito da fonte da notícia */
.source-credit {
    padding: 0.5rem 1.5rem; /* Adiciona espaçamento horizontal igual ao do texto */
    font-size: 0.8rem;
    color: var(--tertiary-color);
    background-color: #22404d; /* Um tom ligeiramente diferente para destacar */
    text-align: right; /* Alinha o texto à direita */
}

.card-text-content p {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    line-height: 1.5;
    flex-grow: 1; /* Ocupa o espaço disponível */
}

.footer {
    position: fixed; /* Posicionamento fixo em relação à janela de visualização */
    bottom: 0; /* Alinha na parte inferior */
    left: 0; /* Alinha à esquerda */
    width: 100%; /* Largura total */
    color: var(--tertiary-color); /* Cor do texto */
    background-color: #0f2027; /* Cor de fundo sólida e escura */
    padding: 15px 20px; /* Espaçamento interno */
    border-top: 1px solid #3c4043; /* Borda superior */
    display: flex; /* Usa flexbox para alinhar os botões */
    justify-content: center; /* Centraliza os botões horizontalmente */
    gap: 1rem; /* Adiciona um espaço entre os botões */
    font-size: 0.8rem; /* Tamanho da fonte */
}

.footer-location {
    color: #9aa0a6; /* Cor do texto */
    margin-bottom: 10px; /* Margem inferior */
}

.footer-links {
    list-style: none; /* Remove os marcadores da lista */
    display: flex; /* Habilita o layout flexbox */
    flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha */
    justify-content: center; /* Centraliza os itens horizontalmente */
    gap: 15px; /* Espaçamento entre os links */
}

.footer-links a {
    color: var(--secondary-color); /* Cor do link */
    text-decoration: none; /* Remove o sublinhado */
    transition: color 0.2s; /* Transição suave para a cor */
}

/* Define a animação de piscar */
@keyframes blink-effect {
    50% {
        /* Na metade da animação, a opacidade é reduzida, criando o efeito de piscar */
        opacity: 0.5;
    }
}

/* Define a animação de pulsar para o botão de resumo e sobre nós */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(138, 180, 248, 0.4);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(138, 180, 248, 0);
    }
}

.footer-links a:hover {
    color: var(--primary-color); /* Muda a cor do link ao passar o mouse */
}

/* --- MEDIA QUERIES PARA RESPONSIVIDADE --- */

/* Telas de Tablet (até 1024px) */
@media (max-width: 1024px) {
    /* Oculta o widget lateral para ganhar espaço */
    .sidebar { 
        display: none; 
    }

    .main-container {
        padding: 1.5rem; /* Reduz o espaçamento lateral */
        padding-bottom: 6rem;
    }

    .card-text-content h1, .card-text-content h2 {
        font-size: 1.5rem; /* Reduz o tamanho do título nos cards */
    }
    .card-hero .card-text-content h1 { font-size: 1.8rem; } /* Título do destaque um pouco maior */

    .card {
        grid-column: span 6; /* 2 cards por linha */
    }
}

/* Telas de Celular (até 768px) */
@media (max-width: 768px) {
    header {
        padding: 2.5rem 1rem; /* Padding vertical aumentado para celular */
        gap: 1rem;
    }
    
    /* Ajusta o tamanho da logo no header para telas menores */
    header::before {
        background-size: 300px; /* Tamanho mais proporcional para celular */
        opacity: 0.6;
    }

    /* Esconde os filtros normais e mostra o botão do modal */
    .filters-container {
        display: none;
    }
    #open-filter-modal-btn {
        display: inline-flex;
    }

    /* Ajustes no modal de filtros para ocupar mais espaço */
    .filter-modal-content {
        width: 95%;
    }

    .search-container {
        flex-direction: row; /* Itens lado a lado */
        width: 100%; /* Ocupa toda a largura */
        gap: 0.5rem; /* Espaço entre os itens */
    }

    .search-container input {
        flex-grow: 1; /* Input ocupa o espaço restante */
        font-size: 1rem;
        text-align: left;
    }

    #botao-busca {
        flex-shrink: 0; /* Botão não encolhe */
        padding: 0.6rem 1.2rem;
    }

    .card, .card-hero {
        grid-column: span 12; /* 1 card por linha */
    }
    .card-hero .card-image { height: 300px; } /* Reduz a altura da imagem de destaque */

    /* Garante que os filtros dentro do modal fiquem bem formatados */
    .modal-body .filter-select,
    .modal-body .custom-select-wrapper,
    .modal-body #clear-filters-btn {
        width: 100%;
    }

    .main-container {
        padding: 1rem; /* Reduz o espaçamento lateral */
        padding-bottom: 6rem;
    }

    /* Ajusta a posição dos botões flutuantes para evitar sobreposição */
    #back-to-top-btn {
        bottom: 20px; /* Distância menor do fundo */
        right: 20px; /* Distância menor da direita */        
        display: block; /* Garante que o botão seja exibido quando ativado pelo JS */
    }
}

/* --- OVERLAY DE BUSCA --- */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 32, 39, 0.95);
    z-index: 1001;
    display: none; /* Começa oculto */
    justify-content: center;
    align-items: center;
    flex-direction: column;
    backdrop-filter: blur(5px);
}

.search-overlay-content {
    display: flex;
    width: 90%;
    max-width: 600px;
}

#search-overlay-input {
    flex-grow: 1;
    padding: 1rem;
    font-size: 1.5rem;
    border: 2px solid var(--tertiary-color);
    border-right: none;
    border-radius: 2rem 0 0 2rem;
    background: transparent;
    color: var(--secondary-color);
    outline: none;
}

#search-overlay-btn {
    padding: 1rem 1.5rem;
    font-size: 1.5rem;
    border: 2px solid var(--tertiary-color);
    border-left: none;
    border-radius: 0 2rem 2rem 0;
    background: var(--primary-color);
    color: #0f2027;
    cursor: pointer;
}

/* --- PAINEL DE FILTROS --- */
.filters-panel {
    position: fixed;
    top: 0;
    left: -350px; /* Começa fora da tela */
    width: 320px;
    height: 100%;
    background-color: #2c5364;
    z-index: 1002;
    box-shadow: 5px 0 15px rgba(0,0,0,0.2);
    transition: left 0.4s ease-in-out;
    display: flex;
    flex-direction: column;
}

.filters-panel.open {
    left: 0;
}

.filters-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--tertiary-color);
}

.filters-panel-header h3 {
    margin: 0;
    font-size: 1.5rem;
}

.filters-panel-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex-grow: 1;
}

.close-btn {
    background: none;
    border: none;
    color: var(--tertiary-color);
    font-size: 2.5rem;
    font-weight: 300;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.close-btn:hover {
    color: var(--secondary-color);
}

#close-search-overlay-btn {
    position: absolute;
    top: 2rem;
    right: 2rem;
}

/* --- ESTILOS DO BOTÃO DE RESUMO E TOOLTIP --- */

/* 1. Container para posicionar a caixa flutuante */
.summary-container {
    position: absolute; /* Posicionamento absoluto em relação ao card */
    top: 1.5rem; /* Distância do topo, alinhado com o padding do texto */
    right: 1.5rem; /* Distância da direita, alinhado com o padding do texto */
    z-index: 3; /* Garante que o botão fique acima do conteúdo de texto */
}

/* 2. O botão que pisca */
.summary-button {
    background-color: var(--primary-color);
    color: #0f2027;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9rem;
    font-family: "Quicksand", sans-serif;
    /* Aplica a animação 'pulse' */
    animation: pulse 1.5s infinite;
    /* Adiciona flex para alinhar ícone e texto */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.summary-button i {
    margin-right: 0.5rem; /* Espaço entre o ícone e o texto */
}

/* 3. A caixa flutuante (Tooltip de Resumo) */
.summary-tooltip {
    /* Oculto por padrão para evitar quebra de layout no celular */
    display: none;
    position: relative; /* Essencial para posicionar o botão de fechar */
    position: absolute;
    top: 0;
    left: calc(100% + 1rem);
    width: 320px;
    min-height: 200px; /* Garante uma altura mínima para não ficar muito pequeno */
    z-index: 1100; /* Valor alto para garantir que fique acima de TUDO */
    /* Estilo inspirado no .sidebar para consistência visual */
    background-color: rgba(30, 42, 51, 0.85); /* Fundo escuro com 85% de opacidade */
    color: var(--secondary-color);
    padding: 1.5rem;
    border-radius: 1rem; /* Bordas arredondadas */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5); /* Sombra para efeito de flutuação */
    border: 1px solid var(--tertiary-color);
    backdrop-filter: blur(5px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-y: auto; /* Adiciona rolagem se o texto for muito longo */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

/* 4. Botão de Fechar para o Tooltip de Resumo */
.summary-close-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--tertiary-color);
    font-size: 1.8rem; /* Tamanho do ícone 'x' reduzido para ficar mais delicado */
    font-weight: 300;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.2s ease;
    z-index: 1101; /* Garante que fique acima do texto do resumo */
}

.summary-close-btn:hover {
    color: var(--secondary-color);
}

/* Ajustes no texto do resumo para melhor enquadramento */
.summary-tooltip p, #summary-modal-text {
    text-align: justify;
    line-height: 1.6;
}
/* Ajuste para o botão de fechar do resumo no modal em telas pequenas */
@media (max-width: 768px) {
    .summary-close-btn {
        top: 0.5rem;
        right: 0.75rem;
    }
}

/* Em telas maiores, o tooltip lateral ainda funciona */
@media (min-width: 769px) {
    .summary-tooltip {
        display: flex; /* Mostra o tooltip apenas em telas maiores */
    }

    .summary-container.show-tooltip .summary-tooltip {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }
}

/* --- ESTILOS DO BOTÃO VOLTAR AO TOPO --- */
#back-to-top-btn {
    display: none; /* Oculto por padrão */
    position: fixed; /* Posição fixa na tela */
    bottom: 90px; /* Distância do fundo (acima do rodapé) */
    right: 30px; /* Distância da direita */
    z-index: 999; /* Garante que fique sobre outros elementos */
    border: none;
    outline: none;
    background-color: var(--primary-color);
    color: #0f2027;
    cursor: pointer;
    padding: 15px;
    border-radius: 50%; /* Deixa o botão circular */
    font-size: 18px;
    width: 50px;
    height: 50px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s, transform 0.3s;
}

#back-to-top-btn:hover {
    background-color: #a1c4fd; /* Um tom um pouco mais claro no hover */
    transform: scale(1.1);
}