/* ==========================================================================
   CSS OTIMIZADO E UNIFICADO - VERSÃO FINAL
   --------------------------------------------------------------------------
   Este arquivo contém todas as regras de estilo do site, corrigidas e
   otimizadas para funcionar perfeitamente com o código HTML fornecido.
   --------------------------------------------------------------------------
   Sumário:
   1. Variáveis de Cor
   2. Estilos Gerais e Tipografia
   3. Assistente Virtual Juca
   4. Acessibilidade (Alto Contraste)
   5. Barra de Dados e Acessibilidade (Govbar)
   6. Estilos de Tabs e Listagens
   7. Header Principal (Topo Hero)
   8. Navbar e Menus (Megamenu) - CORRIGIDO
   9. Estilos de Galeria e Portfólio
   10. Estilos de Galeria de Prefeitos
   11. Cards
   12. Carrossel
   13. Lista de Notícias
   14. Rodapé
   ========================================================================== */

/* 1. VARIÁVEIS DE COR */
:root {
    --verde-escuro: #005bbf;
    --verde-detalhe: #005bbf;
    --cinza-fundo: #f3f5f6;
    --texto-links: #0000ff;
    --bs-primary: #007bff;
    --bs-info: #17a2b8;
}


/* Esconde elementos do menu mobile no desktop */
.megamenu .menu-btn,
.megamenu .cancel-btn,
.megamenu input[type="radio"],
.megamenu input[type="checkbox"],
.megamenu .nav-links .mobile-item {
    display: none;
}
/* MEDIA QUERIES PARA O HEADER E MENU */
/* Regras para Desktop (telas >= 992px) */
@media (min-width: 992px) {
    .topo-links a {
        display: block !important;
    }
    .megamenu .menu-btn,
    .megamenu .cancel-btn,
    .megamenu input[type="radio"],
    .megamenu input[type="checkbox"],
    .megamenu .nav-links .mobile-item {
        display: none !important;
    }
}

/* Regras para Mobile (telas <= 991px) */
@media (max-width: 991px) {
    .topo-links {
        display: none;
    }
    .topo-hero .unicef {
        width: 40px;
    }
    .topo-hero .brasao {
        max-width: 150px;
        margin-left: 10px;
    }
    .topo-hero .marca {
        align-items: center;
    }

    .megamenu .menu-btn,
    .megamenu .cancel-btn {
        display: block;
    }
    .megamenu .menu-btn {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1050;
    }
    .megamenu .nav-links {
        position: fixed;
        top: 0;
        left: -100%;
        width: 280px;
        height: 100%;
        background: #fff;
        flex-direction: column;
        align-items: flex-start;
        padding: 2rem 1rem;
        gap: 0.5rem;
        overflow-y: auto;
        transition: left 0.3s ease;
        z-index: 2000;
        list-style: none;
    }
    #menu-btn:checked ~ .nav-links {
        left: 0;
    }
    .megamenu .nav-links li {
        width: 100%;
    }
    .megamenu .nav-links .desktop-item {
        display: none;
    }
    .megamenu .nav-links .mobile-item {
        display: block;
        width: 100%;
        padding: 0.7rem 1rem;
        cursor: pointer;
    }
    .megamenu .nav-links .mobile-item:hover {
        background: #f0f4ff;
        color: #005bbf;
    }
    .megamenu .drop-menu,
    .megamenu .mega-box {
        position: static;
        display: none;
        width: 100%;
        background: #f9f9f9;
        box-shadow: none;
        border: none;
        margin-top: 0.5rem;
    }
    .megamenu .mega-box .content {
        display: block;
    }
    .megamenu input[type="checkbox"]:checked ~ .drop-menu,
    .megamenu input[type="checkbox"]:checked ~ .mega-box {
        display: block;
    }
    .megamenu .cancel-btn {
        position: absolute;
        top: 1rem;
        right: 1rem;
        font-size: 1.5rem;
        color: #333;
    }
}
/* 2. ESTILOS GERAIS E TIPOGRAFIA */
body { font-family: "Segoe UI", Roboto, Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; }
h2, h3, h5, h6 { font-weight: 700; }
a { text-decoration: none; transition: opacity 0.3s ease-in-out; }
a:hover { opacity: 0.8; }

/* 3. ASSISTENTE VIRTUAL JUCA */
.assistente-juca { position: fixed; bottom: 20px; right: 20px; z-index: 1000; }
.assistente-juca-toggle { width: 60px; height: 60px; background-color: #cecece; border: none; border-radius: 50%; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); transition: transform 0.3s; display: flex; align-items: center; justify-content: center; }
.assistente-juca-toggle:hover { transform: scale(1.1); }
.assistente-juca-toggle img { width: 40px; height: 40px; }
.assistente-juca-chat { position: absolute; bottom: 80px; right: 0; width: 350px; height: 450px; background: #fff; border-radius: 10px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; overflow: hidden; transform: scale(0); transform-origin: bottom right; transition: transform 0.3s ease-in-out; }
.assistente-juca-chat.open { transform: scale(1); }
.chat-header { background: var(--bs-primary); color: #fff; padding: 1rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.chat-header h4 { margin: 0; font-size: 1rem; }
.chat-header .chat-close { background: none; border: none; color: #fff; font-size: 1.2rem; cursor: pointer; opacity: 0.8; }
.chat-header .chat-close:hover { opacity: 1; }
.chat-body { flex-grow: 1; padding: 1rem; overflow-y: auto; background: #f8f9fa; }
.chat-message { padding: 0.75rem; border-radius: 10px; margin-bottom: 1rem; max-width: 85%; word-wrap: break-word; }
.chat-message.bot { background: #e9ecef; color: #212529; margin-right: auto; }
.chat-message.user { background: var(--bs-primary); color: #fff; margin-left: auto; }
.chat-footer { display: flex; padding: 1rem; border-top: 1px solid #e9ecef; background: #fff; }
.chat-footer input { flex-grow: 1; border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.chat-footer button { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* 4. ACESSIBILIDADE (ALTO CONTRASTE) */
body.high-contrast { background-color: #000 !important; color: #fff !important; }
body.high-contrast a, body.high-contrast .nav-links a, body.high-contrast .nav-links label { color: #ffd700 !important; }
body.high-contrast .bg-light { background-color: #000 !important; }
body.high-contrast .bg-dark { background-color: #333 !important; }
body.high-contrast .text-dark { color: #fff !important; }
body.high-contrast .shadow, body.high-contrast .rounded { box-shadow: none !important; }

/* 5. BARRA DE DADOS E ACESSIBILIDADE (GOVBAR) */
.govbar { background: var(--verde-escuro); color: #fff; font-size: 0.95rem; }
.govbar a { color: #fff; text-decoration: none; opacity: 0.95; font-weight: 500; }
.govbar a:hover { opacity: 1; text-decoration: underline; }
.govbar .actions .btn { --bs-btn-padding-y: 0.1rem; --bs-btn-padding-x: 0.35rem; --bs-btn-border-radius: 50rem; line-height: 1; }
.govbar .btn-plain { background: transparent; border: 1px solid rgba(255, 255, 255, 0.5); color: #fff; padding: 0.1rem 0.35rem; cursor: pointer; line-height: 1; border-radius: 5px; min-width: 2rem; }
.govbar .btn-plain:focus { outline: 2px solid #fff; outline-offset: 2px; }
.govbar .btn-verde-atende { background-color: var(--verde-detalhe); color: #fff; border: none; font-weight: bold; padding: 0.3rem 0.8rem; border-radius: 0.25rem; text-decoration: none; transition: background-color 0.3s; }
.govbar .btn-plain:hover { background-color: rgba(255, 255, 255, 0.2); }
.barras-data { background-image: linear-gradient(to right, #005bbf 0%, #0079ff 31%, #03db03, #ffc400 100%); color: #fff; height: auto; padding: 2px; }

/* 6. ESTILOS DE TABS E LISTAGENS */
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { background-color: var(--bs-primary) !important; color: #fff !important; border-color: var(--bs-primary) !important; }
.tab-content table a { color: #000; text-decoration: none; transition: color 0.3s ease-in-out; }
.tab-content table a:hover { color: var(--bs-primary); text-decoration: underline; }
.tab-content table tr td { color: #000 !important; }
.breadcrumb .breadcrumb-item active { font-weight: bold; color:#000; }

/* 7. HEADER PRINCIPAL (TOPO HERO) */
.topo-hero { background: var(--cinza-fundo); color: #000; position: relative; border-bottom: 3px solid var(--verde-detalhe); padding: 1rem; }
.topo-hero .marca { display: flex; align-items: center; gap: 14px; }
.topo-hero .brasao { max-width: 250px; height: auto; }
.topo-hero .unicef { width: 60px; height: auto; }
.topo-hero .titulos .sub { font-size: 1.1rem; margin: 0; }
.topo-hero .titulos .slogan { font-size: 0.6rem; margin: 0; }
.topo-hero .titulos .principal { font-weight: 800; letter-spacing: 0.5px; font-size: 2.1rem; margin: -2px 0 0 0; }
.topo-links a { color: #000; text-decoration: none; font-weight: 600; margin-left: 18px; }
.topo-links a:hover { color: #222; text-decoration: underline; }
.skyline { width: 100%; height: 54px; background: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="1200" height="54" viewBox="0 0 1200 54"><g fill="none" stroke="%23cfd6d9" stroke-width="1.2" opacity="0.9"><path d="M0 44h30v-8h20v-9h18v17h20v-26h22v15h20v-23h18v34h25v-12h15v-22h14v34h20v-18h22v11h19v-26h18v37h25v-17h22v23h20v-12h18v-19h20v31h22v-25h18v15h20v7h22v-27h18v35h26"/></g></svg>') center bottom/contain repeat-x; }
.topo-hero .container .row { display: flex; flex-wrap: wrap; }
.topo-hero .marca { align-items: center; justify-content: center; }

/* 8. NAVBAR E MENUS (MEGAMENU) - CORRIGIDO */
.megamenu { width: 100%; background: #fff; border-bottom: 1px solid #ddd; position: relative; }
.megamenu.sticky-top { top: 0; z-index: 1030; }
.megamenu .wrapper { max-width: 1200px; margin: auto; display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; }
.logo-topo { max-height: 55px; }
.nav-links { display: flex; align-items: center; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.nav-links li { position: relative; }
.nav-links a, .nav-links label { color: #222; font-weight: 600; padding: 0.5rem 0.8rem; display: block; border-radius: 4px; }
.nav-links a:hover, .nav-links label:hover { background: #f0f4ff; color: #005bbf; }
.drop-menu { position: absolute; top: 100%; left: 0; background: #fff; min-width: 220px; border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); display: none; flex-direction: column; padding: 0.5rem 0; z-index: 1000; }
.drop-menu li a { font-size: 0.9rem; padding: 0.5rem 1rem; }
.mega-box { position: absolute; top: 100%; left: 0; width: 800px; background: #fff; padding: 1rem; display: none; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 1000; }
.mega-box .content { display: flex; gap: 1rem; width: 100%; }
.mega-box .content .row { width: 100%; }
.mega-box .row header { font-size: 0.9rem; font-weight: 700; margin-bottom: 0.5rem; border-bottom: 2px solid #005bbf; padding-bottom: 0.3rem; }
.mega-box ul { list-style: none; padding: 0; margin: 0; }
.mega-box ul li { margin-bottom: 0.4rem; }
.mega-box ul li a { font-size: 0.9rem; color: #333; }
.mega-box ul li a:hover { color: #005bbf; }
.has-drop:hover > .drop-menu { display: flex; }
.has-mega:hover > .mega-box { display: flex; }
.nav-links input[type="radio"],
.nav-links input[type="checkbox"] {
    display: none;
}

/* MEDIA QUERIES PARA O HEADER E MENU */
@media (min-width: 992px) {
    .menu-btn, .cancel-btn { display: none; }
    .nav-links input, .nav-links .mobile-item { display: none !important; }
}
@media (max-width: 991px) {
    .topo-links { display: none; }
    .topo-hero .unicef { width: 40px; }
    .topo-hero .brasao { max-width: 150px; margin-left: 10px; }
    .topo-hero .marca { align-items: center; }
    .menu-btn, .cancel-btn { display: block; }
    .menu-btn { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); z-index: 1050; }
    .nav-links { position: fixed; top: 0; left: -100%; width: 280px; height: 100%; background: #fff; flex-direction: column; align-items: flex-start; padding: 2rem 1rem; gap: 0.5rem; overflow-y: auto; transition: left 0.3s ease; z-index: 2000; list-style: none; }
    #menu-btn:checked ~ .nav-links { left: 0; }
    .nav-links li { width: 100%; }
    .nav-links .desktop-item { display: none; }
    .nav-links .mobile-item { display: block; width: 100%; padding: 0.7rem 1rem; cursor: pointer; }
    .nav-links .mobile-item:hover { background: #f0f4ff; color: #005bbf; }
    .drop-menu, .mega-box { position: static; display: none; width: 100%; background: #f9f9f9; box-shadow: none; border: none; margin-top: 0.5rem; }
    .mega-box .content { display: block; }
    .nav-links input[type="checkbox"]:checked ~ .drop-menu, .nav-links input[type="checkbox"]:checked ~ .mega-box { display: block; }
    .cancel-btn { position: absolute; top: 1rem; right: 1rem; font-size: 1.5rem; color: #333; }
}

/* 9. ESTILOS DE GALERIA E PORTFÓLIO */
.portfolio-filter .btn { text-transform: uppercase; font-weight: bold; }
.portfolio-filter .btn-outline-primary.active { background-color: var(--bs-primary); color: #fff; }
.galeria-item { position: relative; overflow: hidden; cursor: pointer; border-radius: 0.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; }
.galeria-item:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); }
.galeria-item .galeria-link { display: block; position: relative; width: 100%; height: 100%; }
.galeria-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease-in-out; }
.galeria-item:hover img { transform: scale(1.05); }
.galeria-overlay { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.6); color: #fff; padding: 1rem; opacity: 0; transition: opacity 0.3s ease-in-out; }
.galeria-item:hover .galeria-overlay { opacity: 1; }
.galeria-overlay h3, .galeria-overlay p { margin: 0; line-height: 1.2; }
.galeria-overlay h3 { font-size: 1.2rem; font-weight: bold; }
.galeria-overlay p { font-size: 0.8rem; }
.galeria-item.cat1 img, .galeria-item.cat2 img, .galeria-item.cat3 img { max-height: 200px; width: auto; object-fit: contain; margin: 0 auto; }

/* 10. ESTILOS DE GALERIA DE PREFEITOS */
.img-galeria { width: 200px; height: 200px; object-fit: cover; border-radius: 50%; border: 3px solid #ddd; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

/* 11. CARDS */
.card-principal { margin-top: -15px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.card-inicial { background-image: linear-gradient(180deg, #f0f0f0 0%, #e4e6e8 100%); border: none; transition: transform 0.3s, box-shadow 0.3s; }
.card-inicial:hover { transform: translateY(-5px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); }

/* 12. CARROSSEL */
.carousel-item { min-height: 380px; }
.carousel-caption { backdrop-filter: blur(5px); border-radius: 12px; }
.main-carousel .carousel-item { background-size: cover; background-position: center center; background-repeat: no-repeat; height: 45vh; min-height: 320px; width: 100%; }
.main-carousel-bg-1 { background-image: url('/images/slides/servicos.png'); }
.main-carousel-bg-2 { background-image: url('/images/slides/banner_transparencia.png'); }
.main-carousel-bg-3 { background-image: url('/images/slides/banner_refis.png'); }
@media (min-width: 992px) { .main-carousel .carousel-item { padding: 0; } }
#carouselNoticias .carousel-item { height: 40vh; min-height: 250px; background-size: cover; background-position: center; border-radius: 12px; }
@media (max-width: 992px) { #carouselNoticias .carousel-item { height: 35vh; } }
@media (max-width: 576px) {
    #carouselNoticias .carousel-item { height: 30vh; }
    #carouselNoticias .carousel-caption h5 { font-size: 1rem; }
    #carouselNoticias .carousel-caption p { font-size: 0.8rem; }
}

/* 13. LISTA DE NOTÍCIAS */
.list-group-item img { width: 80px; height: 60px; object-fit: cover; border-radius: 6px; }
.list-group-item h6 { font-size: 0.95rem; color: #222; }
.list-group-item:hover h6 { color: #0056b3; }

/* 14. RODAPÉ */
.footer { background-image: linear-gradient(to top, #005bbf 0%, #0079ff 100%); padding: 3rem 0 2rem; }
.footer a { color: #fff; }
.footer a:hover { text-decoration: underline; }