@import url("grid.css");

/* @import url("../../../contraste.css"); - Ignored as per user request */

* {

    box-sizing: border-box;

}

:root {

    --bg-color: #f8f9fa;

    --text-color: #1f2937;

    --primary-color: #002a5c;

    /* Deep Navy */

    --secondary-color: #002a5c;

    /* Deep Navy */

    --accent-color: #0096fa;

    /* Bright Action Blue */

    --card-bg-color: #ffffff;

    --border-color: #e5e7eb;

    --header-bg: #ffffff;

    /* Clean white header is more "Premium" than solid color sometimes, but let's stick to brand color if preferred. */

    --header-text: #1f2937;

    /* Spacing & Shadows */

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    --radius-md: 8px;

    --radius-lg: 12px;

}

.dark-mode {

    --bg-color: #111827;

    --text-color: #f3f4f6;

    --primary-color: #3b82f6;

    --secondary-color: #1e40af;

    --accent-color: #60a5fa;

    --card-bg-color: #1f2937;

    --border-color: #374151;

    --header-bg: #111827;

    --header-text: #f3f4f6;

}

/********** Barra de Acessibilidade no Topo **********/

#top-accessibility-bar {

    background-color: var(--bg-color);

    color: #fff;

    padding: 8px 2%;

    font-size: 0.8rem;

}

#top-accessibility-bar .container {

    display: flex;

    justify-content: flex-end;

    align-items: center;

    max-width: 96%;

    margin: 0 auto;

}

#top-accessibility-bar a {

    color: var(--text-color);

    text-decoration: none;

    margin-right: 15px;

    transition: color 0.2s;

}

#top-accessibility-bar {

    display: none;

}

#top-accessibility-bar a:hover {

    color: var(--accent-color);

}

.skip-link {

    position: absolute;

    left: -9999px;

    top: auto;

    width: 1px;

    height: 1px;

    overflow: hidden;

}

.skip-link:focus {

    position: static;

    width: auto;

    height: auto;

    margin-right: auto;

    /* Empurra para a esquerda */

}

.dark-mode #top-accessibility-bar {

    background-color: var(--bg-color);

}

/********** Basic styles **********/

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease, color 0.3s ease;
    overflow-x: hidden;
    position: relative;
}

.dark-mode body {
    background-color: var(--bg-color);
}

a:link,

a:visited,

#content a:link,

#content a:visited {

    color: #1e1b16;

}

.state-published {

    color: #1e1b16 !important;

}

a:hover {

    color: var(--accent-color);

}

#content a:hover,

dl.portlet a:hover {

    color: var(--accent-color) !important;

}

.clear {

    clear: both;

}

#content div.newsImageContainer {

    margin: 0;

    float: none;

}

#content div.newsImageContainer img {

    width: 100%;

    height: auto;

    padding-top: 40px;

}

#content .discreet {

    padding-bottom: 40px;

    font-style: italic;

}

#content .discreet span {

    background-color: #ffffff9c;

}

#content {

    padding-left: 5px;

    padding-right: 5px;

}

[href*="/institucional/noticias"] {

    padding-left: 10px;

    padding-right: 10px;

}

/********** Main container **********/

#wrapper {

    padding: 0;

}

#main {

    margin: 10px auto;

    /* Requested margin top 10px */

    width: 92%;

    max-width: 92%;

    padding-top: 0;

    /* Remove excess padding */

}

/********** Header **********/

header {

    color: var(--header-text);

    position: relative;

    z-index: 100;

}

#header-banner {

    background-color: transparent;

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    max-width: 1400px;

    margin: 0 auto;

    padding: 10px 20px;

    gap: 20px;

}

/* Dark Mode specific overrides */

.dark-mode header a:link,

.dark-mode header a:visited {

    color: #e2e8f0;

    /* Softer white/grey for header links */

}

.dark-mode a:link,

.dark-mode a:visited,

.dark-mode #content a:link,

.dark-mode #content a:visited {

    color: #60a5fa;

    /* Softer blue (Tailwind blue-400) instead of deep primary */

}

.dark-mode a:hover,

.dark-mode #content a:hover {

    color: #93c5fd;

    /* Even softer blue on hover */

}

#siteTitle {

    margin-top: 25px;

}

#titleHeader {

    color: var(--header-text);

    /* Use variable to work in both light/dark */

    font-size: 0.9em;

    display: block;

    /* Ensure it takes space */

}

/* Logo */

#portal-logo {

    display: flex;

    align-items: center;

    margin: 0;

    gap: 15px;

    text-decoration: none;

}

#portal-logo img {
    max-height: 60px;
    width: auto;
    object-fit: contain;
}

#portal-personaltools {

    position: relative;

    top: 10px;

    right: 10px;

    background: var(--secondary-color, #1c3a61);

    padding: 0.5em 1em;

    font-size: 80%;

    border-radius: 8px;

    transition: background-color 0.3s ease;

    z-index: 102;

}

/* Font Resizer Controls - Fixed Position */

/* Font Resizer Controls - Menu Integrated */

#fonteAjuste {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: transparent;
    /* Removed background per user request */
    border: none;
    font-size: 14px !important;
    white-space: nowrap;
    margin-left: 20px;
    padding: 0;
}

#fonteAjuste button {
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px !important;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    /* Keep white for normal header contrast against background, transition to accent */
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
}

#fonteAjuste button:hover {
    background-color: transparent;
    color: var(--accent-color, #0096fa);
    transform: translateY(-2px) scale(1.05);
}

/* Contrast/Dark Mode Toggle Styling */

#siteaction-contraste a {

    position: relative;

    display: flex;

    align-items: center;

}

/* Ensure icons in site actions are visible */

#portal-siteactions a {

    color: var(--header-text);

    /* Use header text color */

}

/* Dark Mode specific overrides for visibility */

.dark-mode #fonteAjuste {
    background-color: transparent;
    border: none;
}

.dark-mode #fonteAjuste button {
    color: #f3f4f6;
}

.dark-mode #fonteAjuste button:hover {
    color: var(--accent-color, #60a5fa);
    background-color: transparent;
}

.dark-mode #portal-siteactions a {

    color: #f3f4f6;

}

/* Add some margin to the font controls if they are near the logo/search */

/* New Theme Toggle Button */

.theme-toggle-btn {

    background: transparent;

    border: 1px solid rgba(255, 255, 255, 0.2);

    color: #fff;

    /* White icon for blue menu */

    cursor: pointer;

    font-size: 1rem;

    /* Slightly smaller for menu */

    padding: 5px;

    border-radius: 50%;

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s ease;

    margin-left: 15px;

    /* Spacing from links */

}

.theme-toggle-btn:hover {

    background-color: rgba(255, 255, 255, 0.2);

    transform: rotate(15deg);

}

.dark-mode .theme-toggle-btn:hover {

    background-color: rgba(255, 255, 255, 0.3);

    color: #fbbf24;

    /* Sun color */

}

/* Ensure font controls alignment */

#fonteAjuste {

    margin-left: 10px;

}

#portal-personaltools dd a:hover {

    background: #f9f9f9;

    color: #000000;

}

#portal-siteactions {

    text-align: right;

    margin-right: 1em;

    font-size: 100%;

    display: flex;

    gap: 1em;

    /* Adiciona um espaçamento entre os itens */

    justify-content: flex-end;

    /* Alinha os itens à direita */

}

#portal-siteactions li {

    display: flex;

    align-items: center;

}

#portal-siteactions a:before {

    font-family: FontAwesome;

    font-size: 1em;

    margin-right: 0.3em;

}

#siteaction-contact a:before {

    content: "\f0e0";

}

#siteaction-sitemap a:before {

    content: "\f0e8";

}

#siteaction-accessibility a:before {

    content: "\f118";

}

#siteaction-search a:before {

    content: "\f002";

}

#siteaction-login a:before {

    content: "\f090";

}

#siteaction-contraste a:before {

    content: "\f042";

}

#siteaction-vlibras a:before {

    content: "\f087";

}

#portal-siteactions li a {

    color: var(--header-text);

}

#siteTitle {

    color: var(--header-text);

}

#siteDescripition {

    color: #fff;

}

#portal-siteactions li a:hover {

    color: #a3ffa6;

    transition-duration: 0.3s;

}

.banner-home {

    height: 250px;

    background-image: url('../img/banner.jpg');

    background-size: cover;

    background-position: center center;

}

/* ===== SEARCH BOX - DESIGN PREMIUM ===== */

/* Tabbed Search Widget */
.custom-search-widget {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 320px;
    margin: 0;
}

/* Both panes must be identical in width */
.search-pane {
    width: 100%;
}

/* portal-searchbox injected by Plone must fill the pane, not set its own max-width */
#tab-site #portal-searchbox {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
}

/* The SAPL form wrapper must also fill 100% */
#tab-sapl .custom-search-form {
    width: 100%;
}

.search-tabs {
    display: flex;
    justify-content: center;
    align-items: stretch;
    /* Same height for all tabs */
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: nowrap;
    /* All in one line */
}

.search-tab {
    flex: 1;
    /* Equal width for all tabs */
    background: transparent;
    border: none;
    color: var(--header-text, #1f2937);
    opacity: 0.6;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    padding: 14px 8px;
    border-radius: 12px;
    transition: all 0.3s ease;
    text-transform: none;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0;
    white-space: normal;
    /* Allow wrapping within equal-width cell */
    line-height: 1.3;
    text-align: center;
}

.search-tab:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.05);
}

.dark-mode .search-tab:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Cor individual por aba - inativas (tênue no texto) */
.search-tab:nth-child(1) {
    color: #0096fa;
}

.search-tab:nth-child(2) {
    color: #10b981;
}

.search-tab:nth-child(3) {
    color: #f59e0b;
}

/* Cor individual por aba - ativas (fundo sólido + texto branco) */
.search-tab:nth-child(1).active {
    background: #0096fa;
    color: #fff;
    
}

.search-tab:nth-child(2).active {
    background: #10b981;
    color: #fff;
    
}

.search-tab:nth-child(3).active {
    background: #f59e0b;
    color: #fff;
   
}

/* Active state genérico (fallback) */
.search-tab.active {
    opacity: 1;
    color: #fff;
}

.search-tab-content {
    position: relative;
    width: 100%;
}

.search-pane {
    display: none;
    width: 100%;
}

.search-pane.active {
    display: block;
}

/* Animação "pop" no botão da aba ao clicar */
.search-tab.tab-pop {
    animation: tabPop 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

@keyframes tabPop {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(0.88);
    }

    70% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* Base styles for all search forms */
#portal-searchbox form,
#tab-sapl form,
#tab-leis form {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    overflow: hidden;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02);
    height: 40px;
    /* Fixed height to ensure they are EXACTLY the same size */
}

.dark-mode #portal-searchbox form,
.dark-mode #tab-sapl form,
.dark-mode #tab-leis form {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

#portal-searchbox form:focus-within,
#tab-sapl form:focus-within,
#tab-leis form:focus-within {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 150, 250, 0.5);
    box-shadow: 0 0 0 3px rgba(0, 150, 250, 0.2);
}

.dark-mode #portal-searchbox form:focus-within,
.dark-mode #tab-sapl form:focus-within,
.dark-mode #tab-leis form:focus-within {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 3px rgba(0, 150, 250, 0.3);
}

#portal-searchbox form>div,
#portal-searchbox .LSBox,
.sapl-search-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 100%;
}

#portal-searchbox input.searchField,
.searchField-external {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: 100%;
    padding: 0 12px 0 16px;
    line-height: normal;
    box-sizing: border-box;
    border: none;
    background-color: transparent;
    color: var(--header-text, #1f2937);
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
    margin: 0 !important;
    outline: none;
    display: block;
}

#portal-searchbox input.searchField::placeholder,
.searchField-external::placeholder {
    color: rgba(0, 0, 0, 0.5);
    font-size: 0.85rem;
}

.dark-mode #portal-searchbox input.searchField::placeholder,
.dark-mode .searchField-external::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

#portal-searchbox input.searchField:focus,
.searchField-external:focus {
    outline: none;
    background-color: transparent;
    color: var(--header-text, #1f2937);
}

#portal-searchbox .searchButton,
.searchButton-external {
    font-family: 'Font Awesome 5 Free', FontAwesome;
    font-weight: 900;
    flex: 0 0 auto;
    height: 100%;
    width: 44px;
    border: none;
    border-radius: 0 15px 15px 0 !important;
    background-color: var(--accent-color, #0096fa);
    color: #ffffff !important;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.25s ease, transform 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0;
}

#portal-searchbox .searchButton:hover,
.searchButton-external:hover {
    background-color: #005aad;
    /* Slightly darker accent, not dark navy */
    transform: none;
}

/* Force accent color regardless of Plone default styles */
#tab-site #portal-searchbox .searchButton,
#portal-searchbox input[type='submit'].searchButton {
    background-color: var(--accent-color, #0096fa) !important;
    color: #fff !important;
}

/* Force #portal-searchbox to match the other search forms exactly */
#tab-site #portal-searchbox {
    display: flex;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

#tab-site #portal-searchbox form {
    border-radius: 15px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    background: rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
}

.dark-mode #tab-site #portal-searchbox form {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

#tab-site #portal-searchbox form>div,
#tab-site #portal-searchbox .LSBox {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
}

#tab-site #portal-searchbox input.searchField {
    height: 100% !important;
    border-radius: 0 !important;
}

#tab-site #portal-searchbox .searchButton {
    border-radius: 0 15px 15px 0 !important;
    height: 100% !important;
    width: 44px !important;
}

/* Navigation */

#main-navigation {

    margin: 0;

    clear: both;

    background: var(--primary-color);

    color: #fff;

    display: flex !important;

    /* Force display */

    justify-content: center;

    align-items: center;

    z-index: 1000;

}

#main-navigation ul {

    padding: 0;

    margin: 0;

    display: flex;

    list-style: none;

    gap: 1.5rem;

    /* Space between items */

}

#main-navigation li {

    display: block;

    /* Flex items default */

    position: relative;

}

#main-navigation li::after {

    /* Remove old separator dots */

    display: none;

}

#main-navigation li a:link,

#main-navigation li a:visited {

    font-size: 0.9rem;

    text-decoration: none;

    display: block;

    padding: 0.8rem 0;

    color: rgba(255, 255, 255, 0.9);

    transition: color 0.2s;

    font-weight: 500;

}

#main-navigation li a:hover {

    color: #fff;

}

/* Mobile Menu button colors */

.menu-button {

    background: #ffffff;

    display: none;

}

.menu-button button {

    border-color: black;

    background: none;

    color: black;

}

.menu-button>button:hover {

    background: #DDD !important;

}

.menu-button>button.menuAtivo {

    background: #DDD;

}

/********** Content **********/

/* breadcrumb */

#portal-breadcrumbs {

    position: relative;

    top: auto;

    left: auto;

    transform: none;

    width: 96%;

    max-width: 1280px;

    margin: 20px auto;

    width: 96%;

    max-width: var(--max-width, 1200px);

    /* Garante que não fique muito largo em telas grandes */

    background-color: rgba(0, 0, 0, 0.03);

    border: 1px solid var(--border-color);

    padding: 0.8em 1.2em;

    border-radius: 8px;

    box-sizing: border-box;

    font-size: 0.8em;

    clear: both;

    z-index: 99;

    color: var(--text-color);

}

#portal-breadcrumbs a {

    color: var(--primary-color);

    text-decoration: none;

}

#portal-breadcrumbs a:hover {

    text-decoration: underline;

}

.section-front-page #portal-breadcrumbs {

    display: none;

    /* Completely remove from flow */

}

/* text styles */

p {

    line-height: 1.4em;

}

h1 {

    color: var(--primary-color);

    border: none;

    margin-bottom: 0;

    font-size: 2.5em;

}

h2 {

    color: var(--primary-color);

}

#content {

    margin: 0;

}

#content .documentDescription,

#content #description {

    color: #4d4d4d;

    font-weight: normal;

    margin-bottom: 1em;

}

.tile-header h2,

.tile-content h2 {

    font-size: 1.2em;

    margin-bottom: 0.5em;

}

.documentFirstHeading {

    font-size: 2.2em;

    margin-bottom: 0.5em;

}

/* Modern Card Grid Layout for News */

/* Modern Card Grid Layout for News */
.tile-noticias {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
}

/* Ensure separation on mobile via grid gap */
@media (max-width: 600px) {
    .tile-noticias {
        gap: 30px !important;
    }
}

.tile-noticias .collection-item {

    display: flex;

    flex-direction: column;

    background-color: var(--card-bg-color);
    border: 1px solid #e5e7eb !important;
    /* Force visible border */
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
    height: 100%;
    position: relative;
    padding: 0;
    margin: 0;
}

.tile-noticias .collection-item:hover {

    transform: translateY(-8px);

    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    border-color: var(--accent-color);

}

/* Image Handling - Move to Top via Flex Order */

/* Target the link that contains the image */

.tile-noticias .collection-item>a:has(img) {

    order: -1;

    display: block;

    width: 100%;

    aspect-ratio: 16/9;

    overflow: hidden;

    margin: 0;

}

/* Fallback for older browsers or if structure varies: target generic image inside */

.tile-noticias .collection-item img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
    margin: 0;
    border-radius: 0;
}

.tile-noticias .collection-item:hover img {

    transform: scale(1.05);

}

.tile-noticias .collection-item>a {

    /* This targets the title link usually if it's direct, or we target h2 a */

    display: block;

    width: auto;

    margin: 0;

}

/* Title Styling */

.tile-noticias .collection-item h2,

.tile-noticias .collection-item h3 {

    order: 1;

    padding: 20px 20px 10px 20px;

    margin: 0;

    font-family: 'Outfit', sans-serif;

    font-weight: 700;

    font-size: 1.25rem;

    line-height: 1.3;

}

.tile-noticias .collection-item h2 a,

.tile-noticias .collection-item h3 a {

    text-decoration: none;

    color: var(--text-color);

    transition: color 0.2s;

}

.tile-noticias .collection-item:hover h2 a,

.tile-noticias .collection-item:hover h3 a {

    color: var(--accent-color);

}

/* Description styling */

.tile-noticias .collection-item p,

.tile-noticias .collection-item .description {

    order: 2;

    padding: 0 20px;

    margin-bottom: 15px;

    font-size: 0.95rem;

    color: #6b7280;

    line-height: 1.6;

    flex-grow: 1;

    /* Push date to bottom */

}

.dark-mode .tile-noticias .collection-item p {

    color: #9ca3af;

}

/* Date/Byline styling */

.tile-noticias .collection-item .tile-byline,

.tile-noticias .collection-item .documentByLine {

    order: 3;

    padding: 0 20px 20px 20px;

    font-size: 0.8rem;

    color: var(--accent-color);

    font-family: 'Inter', sans-serif;

    font-weight: 600;

    margin-top: auto;

    display: flex;

    align-items: center;

}

.tile-noticias .collection-item .tile-byline::before {

    content: '\f073';

    /* Calendar icon */

    font-family: 'Font Awesome 5 Free';

    font-weight: 400;

    margin-right: 8px;

}

.tile-noticias .collection-item p.description {

    font-size: 1.1em;

}

#content .tile-noticias .tile-footer a {

    float: right;

    padding: 1.075em 1.2em;

    background-color: var(--primary-color);

    color: #ffffff !important;

    font-weight: bold;

    text-transform: uppercase;

    transition: all ease-out 0.1s;

}

#content .tile-noticias .tile-footer a:hover {

    background: var(--accent-color);

    color: #fff !important;

}

.tile-content {

    background: none;

    padding: 20px;

    height: 100%;

}



.tile img.right {

    margin-right: 0px;

    height: 250px;

    object-fit: cover;

    max-width: 100%;

    margin: 0 0 1em 1em;

    /* Fixed margin */

    border-radius: 8px;

}

.tile img.left {

    height: 220px;

    /* Adjusted height for balance */

    object-fit: cover;

    max-width: 100%;

    width: auto;

    margin: 0 20px 15px 0;

    /* Positive margin to fix overflow */

    border-radius: 8px;

    /* Consistent radius */

    float: left;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

}

.tile h2 a {

    text-decoration: none;

    color: var(--primary-color);

    font-weight: 700;

}

.tile h2 a:hover {

    color: var(--accent-color);

}

#parent-fieldname-text p {

    font-size: 1.3em;

    padding: 10px;

}

/*********** Portlets ***********/

/* general styles */

.portletHeader,

dl.portlet dt.portletHeader {

    border-bottom: #E6E6E6 1px solid;

    font-weight: bold;

    background-color: transparent;

    color: var(--primary-color);

}

.portletHeader a,

dl.portlet dt.portletHeader a {

    color: var(--primary-color);

    transition: all ease-out 0.1s;

}

.portlet {

    margin-bottom: 2em;

    background: var(--card-bg-color);

    border-radius: 8px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    transition: background-color 0.3s ease;

}

/* lists inside columns */

aside dl,

aside dd,

aside ul {

    padding: 0;

    margin: 0;

}

aside a {

    text-decoration: none;

}

/* portlet navigation */

.portletNavigationTree ul {

    margin: 0;

}

.portletNavigationTree li {

    list-style-position: inside;

}

.portlet.portletNavigationTree .navTree .navTreeItem {

    margin: 0;

}

.portlet.portletNavigationTree .navTreeLevel0>.navTreeItem {

    padding: 0;

}

.portlet.portletNavigationTree .navTree>.navTreeItem {

    border-bottom: rgba(37, 82, 140, 0.05) 1px solid;

    list-style: none;

}

.portlet.portletNavigationTree .navTreeLevel1 .navTreeItem {

    padding-left: 1em;

}

.portlet.portletNavigationTree .navTreeLevel1 .navTreeItem:last-of-type {

    border-bottom: none;

}

.portlet.portletNavigationTree .navTree .navTreeItem a {

    display: block;

    padding: 0.8em 1em;

    transition: all ease-out 0.1s;

    line-height: initial;

}

.portlet.portletNavigationTree .navTree .navTreeItem a:hover {

    background-color: rgba(37, 82, 140, 0.05);

}

.portlet.portletNavigationTree .navTree .navTreeItem a.navTreeCurrentItem {

    background-color: rgba(37, 82, 140, 0.2);

}

dl.portlet ul.navTree .navTreeCurrentItem {

    border-left: none;

    margin: 0;

}

.navTreeLevel2 a {

    padding-left: 1em;

}

.navTreeLevel3 a {

    padding-left: 2em;

}

.navTreeLevel4 a {

    padding-left: 3em;

}

.navTreeLevel5 a {

    padding-left: 4em;

}

.navTreeLevel6 a {

    padding-left: 5em;

}

.portlet .portletHeader>a,

.portlet .portletHeader>span:nth-child(2) {

    display: block;

    color: var(--primary-color);

    padding: 0.7em 0em;

    font-size: 1.2em;

}

.portlet .portletHeader>a:hover {

    background-color: initial;

    color: var(--accent-color) !important;

}

.portlet .portletHeader {

    padding: 0;

    background-color: #f7fdfb;

    border-radius: 8px 8px 0 0;

    padding: 0 1em;

    border-bottom: 1px solid #eee;

    transition: background-color 0.3s ease, border-color 0.3s ease;

}

/********** Footer **********/

footer {

    border-top: none;

    margin-top: 2em;

    font-size: 80%;

    background-color: var(--card-bg-color);

    color: var(--text-color);

}

.footer-address {

    padding: 3em 2%;

    background-color: var(--card-bg-color);

    text-align: center;

    line-height: 1.8;

    font-size: 1rem;

    max-width: 960px;

    margin: 0 auto;

}

.footer-address a {

    color: var(--secondary-color) !important;

    text-decoration: none;

}

.footer-address a:hover {

    text-decoration: underline;

}

.cover-embed-tile {

    padding: 0 !important;

    margin: 0 !important;

    line-height: 0;

    /* Prevents vertical gaps from inline-block behaviors */

}

/* Garante que listas dentro do footer-info fiquem alinhadas à esquerda */

.footer-address ul,

.footer-address ol {

    text-align: left;

    display: inline-block;

    /* Permite que a lista se centralize como um bloco, mas o texto interno fique à esquerda */

}

#footer-colophon {

    padding: 2rem 2%;

    text-align: center;

    background-color: var(--secondary-color);

    color: #ffffff;

    display: flex;

    justify-content: space-around;

    align-items: center;

    gap: 40px;

    flex-wrap: wrap;

}

.colophon-item {

    display: flex;

    align-items: center;

    gap: 15px;

    max-width: 400px;

    text-align: left;

}

.colophon-item a {

    color: #fff !important;

    font-weight: bold;

    text-decoration: none;

}

.colophon-item a {

    font-weight: 700;

}

.colophon-item img {

    height: 40px;

    flex-shrink: 0;

}

.colophon-info {

    font-size: 12px;

    line-height: 1.5;

}

#footer-camara {

    background: none;

    color: var(--text-color);

    display: flex;

    justify-content: center;

    padding-bottom: 2em;

}

.colophon-logo {

    height: 40px
}

.subsection-noticias #main {

    width: 100%;

}

/********* RESPONSIVE **********/

/********** Menu Principal Moderno **********/

#btn-mobile {

    display: none;

}

.cover-embed-tile {

    padding-bottom: 0;

    /* Remove o espaçamento extra abaixo dos iframes */

}

/* Desktop - Mega Menu */

/* Main Navigation (Top Right) Compact */

/* Main Navigation (Top Right) - HIDDEN as per user request */

#main-navigation {

    display: none !important;

}

/* Mega Menu (Bottom) - Floating & Modern */

.cms-menu {

    display: flex;

    justify-content: space-between;

    /* Space between links and toggle */

    background-color: var(--primary-color);

    position: relative;

    width: 96%;

    max-width: 1400px;

    margin: 0 auto;

    /* Center the menu */

    min-height: 50px;

    align-items: center;

    box-shadow: var(--shadow-md);

    z-index: 90;

    border-radius: 15px;

    /* Floating Pill Look */

    padding: 10px 20px;

    margin-bottom: 0;

    /* Spacing from content is handled by the search wrapper below */

}

/* Ensure darker background in dark mode for better contrast */

.dark-mode .cms-menu {

    background-color: #0f172a;

    /* Much darker navy for better dark mode feel */

}

.cms-menu .cms-menu__list {

    justify-content: center;

    flex-grow: 1;

    /* Center links in available space */

    margin-left: 47px;

    /* Offset the button width + margin to perfectly center the list */

}

/* IMPORTANT: Restore the list flex behavior */

.cms-menu .cms-menu__list {

    display: flex;

    list-style: none;

    margin: 0;

    padding: 0;

    gap: 5px;

    /* Spacing between items */

}

.cms-menu .cms-menu__list>li {

    position: relative;

    display: flex;

    align-items: center;

    border-radius: 6px;

    transition: all 0.3s ease;

}

.cms-menu .cms-menu__list>li>a {

    display: block;

    padding: 10px 16px;

    /* Compact padding */

    color: white;

    text-decoration: none;

    font-family: 'Outfit', sans-serif;

    font-weight: 500;

    font-size: 0.95rem;

    transition: color 0.3s ease;

}

/* Clean up artifacts */

/* Efeito hover apenas em telas maiores (desktop) */

@media(min-width: 961px) {

    .cms-menu {

        justify-content: center !important;

        /* Force center for the ul */

        position: relative;

    }

    .cms-menu .cms-menu__list {

        margin: 0 !important;

        /* Remove any margin hacks */

        flex-grow: 0 !important;

        /* Do not grow, just be centered */

    }

    /* SEARCH BOX ADJUSTMENT: Push to the right */

    #portal-searchbox {

        margin-left: auto !important;

        /* Push to the right in the flex container */

        margin-right: 0;

    }

    /* ABSOLUTE POSITIONING FOR CONTROLS ON DESKTOP */

    #fonteAjuste {

        position: absolute;

        right: 55px;

        /* Adjusted position */

        top: 50%;

        transform: translateY(-50%);

        background: transparent !important;

        border: none !important;

        margin: 0 !important;

        padding: 0 !important;

        height: 24px;

        /* Explicit height */

    }

    .theme-toggle-btn {

        position: absolute;

        right: 15px;

        top: 50%;

        margin-top: -16px;

        /* Explicit negative margin centering instead of transform to avoid rendering issues */

        transform: none !important;

        /* Disable transform if it causes blurring/shifting */

        margin-left: 0 !important;

    }

    .cms-menu .cms-menu__list>li:hover {

        background-color: var(--accent-color);

        transform: translateY(-2px);

        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

        border-radius: 8px;

        /* Always rounded by default */

    }

    /* Only flatten bottom if we are sure there is a dropdown appearing */

    /* Using :has here is fine, but let's make sure it doesn't conflict. 

If the user wants the "connected" look, 8px 8px 0 0 is right. 

If they see a straight line where there IS NO submenu, that's the bug.

However, the user says "alguns da lista não fica com border radius na base".

This suggests they WANT the radius. The previous code had `border-radius: 8px 8px 0 0` for `li:hover:has(ul)`.

If a menu item like "Serviços" has a UL but it's not the one being styled or there's a disconnect, it looks bad.

Let's enforce rounded corners for the button itself. The submenu is detached (floating card), so the button SHOULD remain rounded.

*/

    .cms-menu .cms-menu__list>li:hover:has(ul) {

        border-radius: 8px;

        /* Keep it rounded since the submenu is now floating/detached */

    }

}

/* Estilo para links de menu que não são clicáveis */

.no-link {

    cursor: default;

}

/* Submenu */

/* Submenu - "Android Studio" Style Clean Card */

/* Only apply these complex drop-downs on desktop */

@media(min-width: 961px) {

    .cms-menu .cms-menu__item .cms-menu__list {

        display: block;

        /* Prepare for transitions */

        opacity: 0;

        visibility: hidden;

        position: absolute;

        top: calc(100% + 10px);

        /* Subtle gap */

        left: 50%;

        transform: translateX(-50%) translateY(10px);

        /* Center and offset for animation */

        background-color: #fff;

        /* Clean white background */

        min-width: 260px;

        /* Slightly wider */

        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

        /* Rich shadow */

        flex-direction: column;

        padding: 12px;

        border-radius: 12px;

        /* Modern radius */

        z-index: 200;

        transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);

        border: 1px solid rgba(0, 0, 0, 0.05);

    }

    /* Small arrow pointing up (Optional, but nice detail) */

    .cms-menu .cms-menu__item .cms-menu__list::before {

        content: "";

        position: absolute;

        top: -6px;

        left: 50%;

        transform: translateX(-50%) rotate(45deg);

        width: 12px;

        height: 12px;

        background-color: #fff;

        border-left: 1px solid rgba(0, 0, 0, 0.05);

        border-top: 1px solid rgba(0, 0, 0, 0.05);

    }

    /* Show on hover */

    .cms-menu .cms-menu__item:hover .cms-menu__list {

        opacity: 1;

        visibility: visible;

        transform: translateX(-50%) translateY(0);

    }

    .cms-menu .cms-menu__item .cms-menu__list .cms-menu__item {

        width: 100%;

    }

    .cms-menu .cms-menu__item .cms-menu__list .cms-menu__item a {

        padding: 12px 16px;

        width: 100%;

        box-sizing: border-box;

        color: #374151;

        /* Dark grey text */

        font-weight: 500;

        border-radius: 8px;

        /* Rounded items */

        font-size: 0.95rem;

        transition: background-color 0.2s ease, color 0.2s ease;

    }

    .cms-menu .cms-menu__item .cms-menu__list .cms-menu__item a:hover {

        background-color: #f3f4f6;

        /* Very light grey hover */

        color: var(--primary-color);

        transform: none;

        /* Reset main link transform */

    }

    /* Dark Mode Overrides for Submenu */

    .dark-mode .cms-menu .cms-menu__item .cms-menu__list {

        background-color: #1e293b;

        /* Slate 800 */

        border-color: rgba(255, 255, 255, 0.05);

        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);

    }

    .dark-mode .cms-menu .cms-menu__item .cms-menu__list::before {

        background-color: #1e293b;

        border-color: rgba(255, 255, 255, 0.05);

    }

    .dark-mode .cms-menu .cms-menu__item .cms-menu__list .cms-menu__item a {

        color: #e2e8f0;

        /* Slate 200 */

    }

    .dark-mode .cms-menu .cms-menu__item .cms-menu__list .cms-menu__item a:hover {

        background-color: #334155;

        /* Slate 700 */

        color: #fff;

    }

}

/********** Controles de Acessibilidade (Fonte) - Removido CSS Duplicado **********/

/* Dark Mode Toggle Switch */

.dark-mode-input {

    opacity: 0;

    width: 0;

    height: 0;

    position: absolute;

}

.dark-mode-label {

    cursor: pointer;

    font-family: 'Font Awesome 5 Free';

    font-weight: 900;

    font-size: 1.5rem;

    color: var(--header-text);

    transition: color 0.3s ease;

}

.dark-mode-label:hover {

    color: var(--accent-color);

}

.dark-mode-label::before {

    content: '\f185';

    /* Ícone de sol */

}

.dark-mode-input:checked+.dark-mode-label::before {

    content: '\f186';

    /* Ícone de lua */

}

.dark-mode .dark-mode-label:hover {

    color: var(--accent-color);

}

/********** Media Queries para Menu e outros ajustes **********/

@media(max-width: 960px) {

    #main {

        width: 90%;

        /* Tablet width */

    }

    #fonteAjuste {

        display: none;

    }

    #iframeservicos {

        padding: 1em 0;

    }

    /* Menu Mobile - Off-canvas */

    #btn-mobile {

        display: block;

        position: absolute;

        top: 5px;

        right: 20px;

        z-index: 101;

        background: none;

        border: none;

        cursor: pointer;

        padding: 10px;

        color: var(--header-text);

        /* Garante que o ícone do menu seja branco */

    }

    /* O botão de fechar (X) fica fixo na tela quando o menu está ativo */

    #btn-mobile.active {

        position: fixed;

        top: 25px;

        right: 20px;

    }

    #btn-mobile::before {

        content: '\f0c9';

        /* Ícone de hambúrguer (bars) do Font Awesome */

        font-family: 'Font Awesome 5 Free';

        font-weight: 900;

        font-size: 1.8rem;

    }

    #btn-mobile.active::before {

        content: '\f00d';

        /* Ícone de fechar (times) */

    }

    .cms-menu {

        display: block;

        position: fixed;

        top: 0;

        right: 0;

        /* Dock to right */

        bottom: 0;

        left: auto;

        width: 100%;

        /* Ocupa a tela inteira */

        height: 100vh;

        background-color: var(--primary-color);

        /* Animation definition */

        transform: translateX(100%);

        /* Start completely off-screen */

        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s step-end;

        visibility: hidden;

        /* Hide cleanly when closed */

        overflow-y: auto;

        padding-top: 80px;

        margin: 0;

        /* Reset desktop margin */

        border-radius: 0;

        /* Reset desktop radius */

        box-shadow: none;

        /* Reset desktop shadow */

    }

    .cms-menu.active {

        transform: translateX(0);

        /* Slide in */

        visibility: visible;

        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;

        /* Instant visibility on open */

    }

    .cms-menu .cms-menu__list {

        flex-direction: column;

        align-items: flex-start;

    }

    .cms-menu .cms-menu__item {

        width: 100%;

    }

    .cms-menu .cms-menu__item>a {

        padding: 15px 20px;

        border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    }

    .cms-menu .cms-menu__item {

        display: flex;

        flex-wrap: wrap;

        align-items: center;

    }

    .cms-menu .cms-menu__item>a {

        flex-grow: 1;

    }

    .cms-menu .cms-menu__item .cms-menu__list {

        display: block;

        position: static;

        background-color: transparent;

        box-shadow: none;

        padding: 0;

        width: 100%;

        max-height: 0;

        overflow: hidden;

        transition: max-height 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);

    }

    .cms-menu .cms-menu__item .cms-menu__list .cms-menu__item a {

        padding-left: 40px;

    }

    .submenu-toggle {

        display: none;

    }

    .submenu-toggle {

        display: block;

        background: transparent;

        border: none;

        cursor: pointer;

        font-size: 1.2rem;

        padding: 15px;

        /* Alinha o ícone com o texto do menu */

        margin-left: auto;

        /* Empurra o botão para a direita */

    }

    .submenu-toggle::before {

        content: '\f078';

        /* Seta para baixo do Font Awesome */

        font-family: 'Font Awesome 5 Free';

        font-weight: 900;

        transition: transform 0.3s ease;

    }

    .submenu-toggle.active::before {

        transform: rotate(-180deg);

    }

    /* Search box dentro do menu off-canvas mobile */
    #portal-searchbox {
        display: flex;
        width: calc(100% - 40px);
        max-width: 100%;
        min-width: 0;
        margin: 16px 20px;
    }

    #portal-searchbox form {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        background: rgba(255, 255, 255, 0.15);
        border: 1.5px solid rgba(255, 255, 255, 0.3);
        border-radius: 15px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
        overflow: hidden;
    }

    #portal-searchbox form:focus-within {
        background: rgba(255, 255, 255, 0.25);
        border-color: rgba(255, 255, 255, 0.55);
        box-shadow: 0 0 0 3px rgba(0, 150, 250, 0.35);
    }

    #portal-searchbox input.searchField {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        height: 46px;
        padding: 0 12px 0 20px;
        border: none;
        background-color: transparent;
        color: #fff;
        font-size: 0.95rem;
        font-family: 'Inter', sans-serif;
        display: block;
        margin: 0 !important;
        outline: none;
        line-height: normal;
        box-sizing: border-box;
    }

    #portal-searchbox input.searchField::placeholder {
        color: rgba(255, 255, 255, 0.6);
    }

    #portal-searchbox input.searchField:focus {
        outline: none;
        background-color: transparent;
        color: #fff;
    }

    #portal-searchbox .searchButton {
        font-family: 'Font Awesome 5 Free', FontAwesome;
        font-weight: 900;
        flex: 0 0 auto;
        height: 46px;
        width: 58px;
        border: none;
        border-radius: 0 15px 15px 0 !important;
        background-color: rgba(0, 150, 250, 0.8);
        color: #ffffff !important;
        cursor: pointer;
        font-size: 1.05rem;
        transition: background-color 0.25s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        padding: 0;
    }

    #portal-searchbox .searchButton:hover {
        background-color: var(--accent-color);
    }

    /* Widget de busca com abas no mobile */
    .custom-search-widget {
        width: calc(100% - 40px);
        max-width: 100%;
        margin: 12px 20px;
    }

    .search-tabs {
        gap: 4px;
        margin-bottom: 8px;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .search-tab {
        flex: 1;
        text-align: center;
        font-size: 0.65rem;
        padding: 14px 4px;
        white-space: normal;
        line-height: 1.2;
    }

    /* Sobre fundo escuro do menu mobile — cores mais claras */
    .search-tab:nth-child(1) {
        color: #5fc7ff;
    }

    .search-tab:nth-child(2) {
        color: #34d399;
    }

    .search-tab:nth-child(3) {
        color: #fbbf24;
    }

    /* Formulários externos com mesmo estilo do searchbox nativo no mobile */
    #tab-sapl form,
    #tab-leis form {
        background: rgba(255, 255, 255, 0.15);
        border: 1.5px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
        height: 46px;
    }

    #tab-sapl form:focus-within,
    #tab-leis form:focus-within {
        background: rgba(255, 255, 255, 0.25);
        border-color: rgba(255, 255, 255, 0.55);
        box-shadow: 0 0 0 3px rgba(0, 150, 250, 0.35);
    }

    .searchField-external {
        color: #fff;
        height: 46px;
        font-size: 0.95rem;
    }

    .searchField-external::placeholder {
        color: rgba(255, 255, 255, 0.6);
    }

    .searchButton-external {
        height: 46px;
        width: 58px;
        font-size: 1.05rem;
    }

    #tab-site #portal-searchbox {
        width: 100%;
        margin: 0;
    }

}

/* Landscape phones and down */

@media (max-width: 767px) {

    .subsection-noticias #main {

        width: 92%
    }

    #main {

        padding-top: 0px;

        width: 96%;

        /* Restore width on mobile */

    }

    #main-navigation ul {

        display: none;

    }

    #content {

        padding-left: 0;

        padding-right: 0;

    }

    #iframeservicos {

        padding: 1em 0;

    }

    #portal-logo {

        display: inline-block;

        font-size: 90%;

    }

    #portal-logo.has-title img {

        display: grid;

        width: 55px;

        height: auto;

    }

    #siteTitle {

        margin-top: 15px;

        font-size: 1.2em;

    }

    #main-navigation ul {

        box-sizing: border-box;

        padding: 0;

        padding-right: 0.5em;

        text-align: center;

        float: none;

        width: 100%;

        white-space: nowrap;

        overflow-x: scroll;

        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;

    }

    #main-navigation ul::after {

        content: '';

        height: 43px;

        position: absolute;

        pointer-events: none;

        right: 0;

        top: 0;

        width: 2.2em;

        z-index: 10;

    }

    #main-navigation li {

        float: none;

    }

    #main-navigation li a:link {

        padding: 1.2em 1.5em;

        line-height: 1;

    }

    /* Search box no mobile - fundo branco para contraste */
    #portal-searchbox {
        margin: 8px auto;
        width: 90%;
        max-width: 480px;
        min-width: 0;
        max-width: 100%;
        padding: 0;
        box-sizing: border-box;
    }

    #portal-searchbox form {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        background: #ffffff;
        border: 1.5px solid #e0e0e0;
        border-radius: 25px;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    #portal-searchbox form:focus-within {
        border-color: var(--accent-color);
        box-shadow: 0 0 0 3px rgba(0, 150, 250, 0.15), 0 3px 12px rgba(0, 0, 0, 0.1);
    }

    #portal-searchbox input.searchField {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        height: 44px;
        padding: 0 10px 0 18px;
        box-sizing: border-box;
        border: none;
        background-color: transparent;
        color: #333;
        font-size: 0.9rem;
        font-family: 'Inter', sans-serif;
        display: block;
        margin: 0 !important;
        outline: none;
    }

    #portal-searchbox input.searchField::placeholder {
        color: #aaa;
    }

    #portal-searchbox input.searchField:focus {
        outline: none;
        background-color: transparent;
        color: #222;
    }

    #portal-searchbox .searchButton {
        font-family: 'Font Awesome 5 Free', FontAwesome;
        font-weight: 900;
        flex: 0 0 auto;
        height: 44px;
        width: 55px;
        border: none;
        border-radius: 0 24px 24px 0 !important;
        background-color: var(--primary-color);
        color: #ffffff !important;
        cursor: pointer;
        font-size: 1rem;
        transition: background-color 0.25s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        padding: 0;
    }

    #portal-searchbox .searchButton:hover {
        background-color: var(--accent-color);
    }

    .colophon-item {

        max-width: 96%;

        margin: 1.5rem 2%;

    }

    #footer-colophon {

        flex-direction: column;

        gap: 25px;

        padding: 1.5rem 5%;

    }

    .cover-richtext-tile .tile-content {

        padding-left: 25px;

    }

}

@media (max-width: 480px) {

    .tile-noticias .collection-item {

        width: 100%;

        margin-right: 0;

    }

    #content {

        padding-left: 0;

        padding-right: 0;

    }

}

/********** Início: Estilos para Galeria de Lista (List Gallery) **********/

.list-gallery {

    position: relative;

    width: 100%;

    overflow: hidden;

    border-radius: 8px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    min-height: 350px;

    /* Altura mínima para evitar colapso */

}

.list-gallery__slides {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    scrollbar-width: none;
    /* Firefox */
}

.list-gallery__slides::-webkit-scrollbar {
    display: none;
    /* Safari, Chrome */
}

.list-gallery__slide {
    min-width: 100%;
    flex: 0 0 100%;
    scroll-snap-align: center;
    box-sizing: border-box;
    position: relative;
    height: 100%;
    padding-bottom: 100%;
    overflow: hidden;
}

.list-gallery__slide a {

    width: 100%;

    height: 100%;

    text-decoration: none;

}

.list-gallery__image {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    /* Garante que a imagem cubra todo o espaço */

    transition: transform 0.5s ease;

}

.list-gallery__slide:hover .list-gallery__image {

    transform: scale(1.05);

}

.list-gallery__caption {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    padding: 40px 20px 20px;

    background: rgba(0, 0, 0, 0.6);

    color: #fff;

    transition: background 0.3s ease;

}

.list-gallery__title {

    font-size: 1.8rem;

    font-weight: 700;

    margin: 0 0 10px 0;

    color: #fff;

}

.list-gallery__description {

    font-size: 1rem;

    line-height: 1.5;

    margin: 0;

    color: rgba(255, 255, 255, 0.9);

}

.list-gallery__nav {

    position: absolute;

    top: 50%;

    transform: translateY(-50%) scale(0.9);

    background-color: rgba(255, 255, 255, 0.9);

    color: white;

    border: none;

    cursor: pointer;

    width: 44px;

    height: 44px;

    border-radius: 50%;

    font-size: 1.8rem;

    z-index: 10;

    transition: all 0.3s ease;

    opacity: 0;

    color: #333;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

}

.list-gallery:hover .list-gallery__nav {

    opacity: 1;

    transform: translateY(-50%) scale(1);

}

.list-gallery__nav:hover {

    background-color: #fff;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);

}

.list-gallery__nav--prev {

    left: 15px;

}

.list-gallery__nav--next {

    right: 15px;

}

@media (max-width: 767px) {
    .list-gallery__nav {
        opacity: 0.85;
        transform: translateY(-50%) scale(0.9);
        width: 38px;
        height: 38px;
        font-size: 1.5rem;
        background-color: rgba(255, 255, 255, 0.95);
    }

    .list-gallery__nav--prev {
        left: 5px;
    }

    .list-gallery__nav--next {
        right: 5px;
    }

    .list-gallery__slide {

        padding-bottom: 100%;

    }

    .list-gallery__title {

        font-size: 1.4rem;

    }

    .list-gallery__description {

        display: none;

    }

    #portal-breadcrumbs {

        position: relative;

        top: auto;

        left: auto;

        transform: none;

        width: 100%;

        margin: 1em 0;

    }

}

/********** Fim: Estilos para Galeria de Lista **********/

/* Header Banner Spacing */

#header-banner {

    background-color: transparent;

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    max-width: 1400px;

    margin: 0 auto;

    padding: 5px 20px;

    /* Reduced vertical padding */

    gap: 15px;

}

/* Consolidated List Gallery Styles - see above */

/* Desktop Grid for List & Collection Tiles (when not transformed into gallery/carousel) */

@media(min-width: 961px) {

    .cover-list-tile,

    .cover-collection-tile {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

        gap: 30px;

    }

    .cover-list-tile .list-item,

    .cover-collection-tile .collection-item {

        display: flex;

        flex-direction: column;

        background-color: var(--card-bg-color);

        border: 1px solid var(--border-color);

        border-radius: var(--radius-lg);

        overflow: hidden;

        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

        box-shadow: var(--shadow-sm);

        height: 100%;

        /* Uniform height */

        position: relative;

        padding-bottom: 50px;

        /* Space for date/button if needed */

    }

    .cover-list-tile .list-item:hover,

    .cover-collection-tile .collection-item:hover {

        transform: translateY(-8px);

        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

        border-color: var(--accent-color);

    }

    /* Image at top */

    .cover-list-tile .list-item h2,

    .cover-collection-tile .collection-item h2 {

        font-size: 1.25rem;

        order: 1;

        /* After image */

        margin: 15px 20px 5px;

        font-family: 'Outfit', sans-serif;

    }

    .cover-list-tile .list-item p,

    .cover-collection-tile .collection-item p {

        order: 2;

        margin: 0 20px 15px;

        color: #6b7280;

        font-size: 0.95rem;

    }

    .cover-list-tile .list-item a:has(img),

    .cover-collection-tile .collection-item a:has(img) {

        order: -1;

        /* Top */

        width: 100%;

        aspect-ratio: 16/9;

        display: block;

        overflow: hidden;

    }

    .cover-list-tile .list-item img,

    .cover-collection-tile .collection-item img {

        width: 100%;

        height: 100%;

        object-fit: cover;

        transition: transform 0.5s ease;

        margin: 0;

        float: none;

        border-radius: 0;

    }

    .cover-list-tile .list-item:hover img,

    .cover-collection-tile .collection-item:hover img {

        transform: scale(1.05);

    }

}

/* =========================================

IMPROVED NEWS ITEM STYLES (User Request)

========================================= */

/* Common Centering & Max-Width */

.documentFirstHeading,

.documentByLine,

.documentDescription,

.newsImageContainer,

#parent-fieldname-text,

#viewlet-social-like,

#viewlet-below-content-title {

    max-width: 1000px;

    margin-left: auto !important;

    margin-right: auto !important;

}

/* Fix Social Like Alignment */

#viewlet-social-like {

    display: flex !important;

    justify-content: flex-start !important;

    /* Left Aligned */

    gap: 10px;

    margin-bottom: 1.5rem !important;

    clear: both;

}

/* 1. Header & Title */

.documentFirstHeading {

    font-family: 'Outfit', sans-serif;

    /* Modern font */

    font-size: 2.5rem !important;

    /* Larger size */

    font-weight: 700;

    color: var(--primary-color) !important;

    line-height: 1.2;

    margin-bottom: 0.5rem;

    letter-spacing: -0.02em;

    text-align: left;

    /* Left align title */

}

/* 2. Metadata (Byline) */

.documentByLine {

    font-size: 0.9rem;

    color: #6b7280;

    /* Gray 500 */

    margin-bottom: 2rem;

    padding-bottom: 1rem;

    border-bottom: 1px solid var(--border-color);

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: flex-start !important;

    /* Left align metadata */

    gap: 15px;

}

.documentByLine .documentAuthor,

.documentByLine .documentModified {

    display: inline-flex;

    align-items: center;

}

/* 3. Description (Lead Text) */

.documentDescription {

    font-family: 'Inter', sans-serif;

    font-size: 1.25rem !important;

    /* Lead size */

    line-height: 1.6 !important;

    color: var(--text-color);

    margin-bottom: 2rem !important;

    margin-top: 0 !important;

    font-weight: 500;

    border-left: 4px solid var(--accent-color);

    padding-left: 1rem;

    background-color: transparent !important;

    /* Ensure no gray box */

}

/* 4. Main Image */

.newsImageContainer {

    margin: 0 auto 2rem auto !important;

    float: none !important;

    /* Reset float */

    width: 100% !important;

    max-width: 1000px;

    /* Optional cap */

}

.newsImageContainer a {

    display: block;

}

.newsImageContainer img {

    width: 100% !important;

    height: auto !important;

    border-radius: var(--radius-lg) !important;

    box-shadow: var(--shadow-md) !important;

    padding-top: 0 !important;

    /* Fix explicit padding */

    display: block;

}

/* 5. Content Body */

#parent-fieldname-text {

    font-family: 'Inter', sans-serif;

    font-size: 1.125rem;

    /* 18px reading size */

    line-height: 1.8;

    color: var(--text-color);

    max-width: 1000px;

    /* Match others */

}

#parent-fieldname-text p {

    margin-bottom: 1.5em;

}

/* Dark Mode Adjustments for News */

.dark-mode .documentFirstHeading {

    color: #f3f4f6 !important;

}

.dark-mode .documentByLine {

    color: #9ca3af;

    border-color: var(--border-color);

}

/* Fix Specificity for Dark Mode Description */

.dark-mode #content .documentDescription,

.dark-mode .documentDescription {

    color: #e5e7eb !important;

    /* Force readable light color */

}

.dark-mode #parent-fieldname-text {

    color: #d1d5db;

}

/* User Request: Dark Mode Mobile Menu Background */

@media (max-width: 960px) {

    .dark-mode .cms-menu {

        background-color: #162037 !important;

        background-image: none !important;

    }

}

/* User Request: Dark Mode Footer Colophon Color */

.dark-mode #footer-colophon {

    background-color: #162037 !important;

    /* Darker blue/slate */

    border-top: 1px solid rgba(255, 255, 255, 0.05);

}

/* User Request: Transparent Content Info in Dark Mode */

.dark-mode #footer-info {

    background-color: transparent !important;

    box-shadow: none !important;

}

/* Footer Table Layout & Dark Mode Fixes */

#footer-info {

    width: 100%;

    margin-bottom: 20px;

}

#footer-info table {

    width: 100%;

    border-collapse: collapse;

    table-layout: fixed;

    /* Ensures equal columns or respects width */

}

#footer-info th {

    text-align: left;

    padding: 10px 15px 15px 0;

    font-size: 1.1rem;

    font-weight: 700;

    color: var(--primary-color);

    vertical-align: top;

    border-bottom: 2px solid var(--border-color);

    margin-bottom: 15px;

}

#footer-info td {

    vertical-align: top;

    padding: 15px 15px 0 0;

    color: var(--text-color);

}

#footer-info ul {

    list-style: none;

    padding: 0;

    margin: 0;

}

#footer-info li {

    margin-bottom: 8px;

}

#footer-info a {

    text-decoration: none;

    color: var(--text-color);

    transition: color 0.2s ease;

}

#footer-info a:hover {

    color: var(--accent-color);

    text-decoration: underline;

}

/* Address Styling */

#footer-info address {

    font-style: normal;

    background: rgba(0, 0, 0, 0.02);

    padding: 15px;

    border-radius: 8px;

    border: 1px solid var(--border-color);

    font-size: 0.9rem;

    line-height: 1.6;

}

/* Dark Mode Specifics for Footer */

.dark-mode #footer-info th {

    color: #f3f4f6 !important;

    border-bottom-color: rgba(255, 255, 255, 0.1);

}

.dark-mode #footer-info td,

.dark-mode #footer-info address {

    color: #d1d5db !important;

}

.dark-mode #footer-info a {

    color: #e5e7eb !important;

}

.dark-mode #footer-info a:hover,

.dark-mode #footer-info address a:hover {

    color: var(--accent-color) !important;

}

.dark-mode #footer-info address {

    background: rgba(255, 255, 255, 0.05);

    border-color: rgba(255, 255, 255, 0.1);

}

.dark-mode #footer-info address a {

    color: var(--accent-color) !important;

}

/* Responsive Footer */

@media (max-width: 768px) {

    #footer-info table,

    #footer-info tbody,

    #footer-info tr,

    #footer-info th,

    #footer-info td {

        display: block;

        width: 100%;

    }

    #footer-info tr {

        margin-bottom: 20px;

    }

    #footer-info th {

        padding-bottom: 5px;

        margin-bottom: 10px;

        border-bottom: 1px solid var(--border-color);

    }

    #footer-info td {

        padding: 0 0 15px 0;

    }

}

/* Styles for #portal-personaltools (User Menu) */
#portal-personaltools {
    position: absolute;
    top: 40px;
    right: 20px;
    z-index: 500;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
    display:none;
}

#portal-personaltools .actionMenuHeader {
    margin: 0;
    padding: 0;
}

#portal-personaltools .actionMenuHeader a {
    background-color: #2563EB;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s;
}

#portal-personaltools .actionMenuHeader a:hover {
    background-color: #1d4ed8;
}

#portal-personaltools .actionMenuHeader a::after {
    content: '';
    font-size: 0.7em;
    margin-left: 8px;
}

#portal-personaltools .actionMenuContent {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    margin-top: 5px;
    z-index: 501;
}

/* Show menu on hover or when class is activated */
#portal-personaltools:hover .actionMenuContent,
#portal-personaltools:not(.deactivated) .actionMenuContent,
#portal-personaltools.activated .actionMenuContent {
    display: block;
}

#portal-personaltools .actionMenuContent ul {
    list-style: none;
    margin: 0;
    padding: 5px 0;
}

#portal-personaltools .actionMenuContent li {
    margin: 0;
    border-bottom: 1px solid #f0f0f0;
}

#portal-personaltools .actionMenuContent li:last-child {
    border-bottom: none;
}

#portal-personaltools .actionMenuContent li a {
    display: block;
    padding: 10px 16px;
    color: #374151;
    text-decoration: none;
    transition: background-color 0.2s;
}

#portal-personaltools .actionMenuContent li a:hover {
    background-color: #f3f4f6;
    color: #111827;
}

@media screen and (max-width: 768px) {
    #portal-personaltools {
        top: 10px;
        right: 10px;
    }

    #portal-personaltools .actionMenuHeader a {
        padding: 5px 10px;
        font-size: 0.8rem;
    }
}

/* --- Custom Redesigned Footer --- */

.custom-footer {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: #374151;
    padding: 2rem 0;
    max-width: 100%;
}

.custom-footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    width: 100%;
}

.footer-column {
    display: flex;
    flex-direction: column;
}

.footer-title {
    color: #1e3a8a;
    /* Dark Blue */
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-list li {
    margin-bottom: 0.75rem;
}

.footer-list a {
    color: #4b5563;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.95rem;
    display: inline-block;
}

.footer-list a:hover {
    color: #2563eb;
    transform: translateX(4px);
}

.footer-address {
    font-style: normal;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #4b5563;
}

.footer-address p {
    margin-bottom: 1rem;
}

.footer-link-highlight {
    color: #2563eb;
    font-weight: 600;
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.social-links a img {
    height: 32px;
    width: auto;
    transition: transform 0.2s;
}

.social-links a:hover img {
    transform: scale(1.1);
}

.expediente-box {
    background-color: #f8fafc;
    border-left: 4px solid #3b82f6;
    padding: 1.25rem;
    border-radius: 0 0.5rem 0.5rem 0;
}

.dark-mode .expediente-box {
    background-color: #1f2937;
    color: #e5e7eb;
}

.dark-mode .expediente-section strong {
    color: #60a5fa;
}

.expediente-section {
    margin-bottom: 1rem;
}

.expediente-section strong {
    display: block;
    color: #1e3a8a;
    margin-bottom: 0.25rem;
}

.expediente-section:last-child {
    margin-bottom: 0;
}

/* Responsiveness */
@media (max-width: 768px) {
    .custom-footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-title {
        margin-top: 1rem;
    }
}

/* Social Media Buttons */
.social-buttons-container {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    font-size: 1.2rem;
    color: white !important;
    /* Force icon color */
}

.social-btn-facebook {
    background-color: #1877F2;
}

.social-btn-instagram {
    background: #E1306C;
}

.social-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
    filter: brightness(1.1);
}

.social-btn i {
    color: white;
}

/* Updated Social Buttons (Rectangular Outline Style) */
.social-buttons-container {
    display: flex;
    gap: 15px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    /* Slightly rounded corners */
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    background: transparent;
    box-shadow: none;
}

/* Facebook Style */
.social-btn-facebook {
    border-color: #1877F2;
    color: #1877F2 !important;
}

.social-btn-facebook i {
    color: #1877F2;
    font-size: 1.2rem;
}

.social-btn-facebook:hover {
    background-color: #1877F2;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3);
}

.social-btn-facebook:hover i {
    color: white;
}

/* Instagram Style */
.social-btn-instagram {
    border-color: #d6249f;
    /* Simplify to main color for border */
    color: #d6249f !important;
}

.social-btn-instagram i {
    color: #d6249f;
    font-size: 1.2rem;
}

.social-btn-instagram:hover {
    background: #E1306C;
    color: white !important;
    border-color: transparent;
    /* Remove border on hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(214, 36, 159, 0.3);
}

.social-btn-instagram:hover i {
    color: white;
}

/* Text Span */
.social-btn span {
    font-size: 1rem;
    font-weight: 600;
}