/* - ploneCustom.css - */
@media all {
/* =========================================================
   1. CARDS DOS PARLAMENTARES (PÁGINA INICIAL)
   ========================================================= */

div.cover-richtext-tile.tile-content {
    text-align: center !important;
}

div.tile-parlamentares {
    display: inline !important; 
}

div.tile-parlamentares a.external-link {
    display: inline-block !important; 
    vertical-align: top !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    border: 1px solid #eaeaea !important;
    margin: 10px 15px !important; 
    background-color: #ffffff !important;
}

div.tile-parlamentares a.external-link:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25) !important;
}

div.tile-parlamentares a.external-link img.image-inline {
    display: block !important;
    border-radius: 10px !important; 
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* =========================================================
   2. MODERNIZAÇÃO DO MENU LATERAL ESQUERDO
   ========================================================= */

/* Esconde as bordas falsas do sistema antigo */
body #column-one .portletWrapper dl.portlet dt.portletHeader span.portletTopLeft,
body #column-one .portletWrapper dl.portlet dt.portletHeader span.portletTopRight {
    display: none !important;
}

/* O Card Principal do Menu */
body #column-one .portletWrapper dl.portlet {
    border-radius: 8px !important;
    overflow: hidden !important; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
    border: 1px solid #eaeaea !important;
    background-color: #ffffff !important;
    margin-bottom: 25px !important;
}

/* Cabeçalho Azul Escuro */
body #column-one .portletWrapper dl.portlet dt.portletHeader {
    background-color: #1a3a5c !important;
    background-image: none !important; 
    border: none !important;
    padding: 16px 15px !important;
    margin: 0 !important;
}

body #column-one .portletWrapper dl.portlet dt.portletHeader a {
    color: #ffffff !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    text-shadow: none !important;
    border: none !important;
    display: block !important;
}

/* Corpo do Menu */
body #column-one .portletWrapper dl.portlet dd.portletItem,
body #column-one .portletWrapper dl.portlet ul.navTree {
    background-color: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    list-style: none !important;
}

/* Linhas divisórias sutis */
body #column-one .portletWrapper dl.portlet ul.navTree li.navTreeItem {
    border-bottom: 1px solid #f2f2f2 !important;
    margin: 0 !important;
}

body #column-one .portletWrapper dl.portlet ul.navTree li.navTreeItem:last-child {
    border-bottom: none !important;
}

/* Os links e a animação de Hover */
body #column-one .portletWrapper dl.portlet ul.navTree li.navTreeItem a {
    display: block !important;
    padding: 12px 15px !important;
    color: #444444 !important;
    border-left: 4px solid transparent !important;
    transition: all 0.2s ease !important;
    background-color: transparent !important;
}

body #column-one .portletWrapper dl.portlet ul.navTree li.navTreeItem a:hover {
    background-color: #f8f9fa !important;
    color: #1a3a5c !important;
    border-left: 4px solid #1a3a5c !important;
    padding-left: 18px !important;
}


/* =========================================================
   3. MODERNIZAÇÃO DA COLUNA DIREITA (Eventos, Links, etc.)
   ========================================================= */

/* Esconde as bordas falsas do sistema antigo na coluna direita */
body #column-two .portletWrapper dl.portlet dt.portletHeader span.portletTopLeft,
body #column-two .portletWrapper dl.portlet dt.portletHeader span.portletTopRight {
    display: none !important;
}

/* O Card Principal da Coluna Direita */
body #column-two .portletWrapper dl.portlet {
    border-radius: 8px !important;
    overflow: hidden !important; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
    border: 1px solid #eaeaea !important;
    background-color: #ffffff !important;
    margin-bottom: 25px !important;
}

/* Cabeçalho Azul Escuro */
body #column-two .portletWrapper dl.portlet dt.portletHeader {
    background-color: #1a3a5c !important;
    background-image: none !important; 
    border: none !important;
    padding: 16px 15px !important;
    margin: 0 !important;
}

body #column-two .portletWrapper dl.portlet dt.portletHeader a,
body #column-two .portletWrapper dl.portlet dt.portletHeader span {
    color: #ffffff !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    text-shadow: none !important;
    border: none !important;
    display: block !important;
}

/* Corpo dos Cards da Coluna Direita */
body #column-two .portletWrapper dl.portlet dd.portletItem,
body #column-two .portletWrapper dl.portlet dd.portletFooter {
    background-color: #ffffff !important;
    border: none !important;
}

/* Ajustes específicos para os botões em "Links Úteis" */
/* Remove a borda azul fina e adiciona efeito hover */
body #column-two .portlet-static-links-uteis a.external-link img,
body #column-two .portlet-static-links-uteis a.internal-link img {
    border: none !important; /* Remove a borda original */
    border-radius: 8px !important; /* Arredonda os cantos */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important; /* Sombra leve */
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

body #column-two .portlet-static-links-uteis a.external-link:hover img,
body #column-two .portlet-static-links-uteis a.internal-link:hover img {
    transform: translateY(-3px) !important; /* Levita levemente */
    box-shadow: 0 5px 12px rgba(0,0,0,0.2) !important; /* Sombra mais forte no hover */
}

/* Oculta os parágrafos vazios criados pelo editor que geram espaço extra */
body #column-two .portlet-static-links-uteis p:empty,
body #column-two .portlet-static-links-uteis p:has(br) {
    display: none !important;
}

/* =========================================================
   4. BOTÕES MODERNOS DA COLUNA DIREITA (Links Úteis)
   ========================================================= */

/* Caixa que organiza todos os botões com um espaçamento perfeito */
.botoes-uteis-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important; 
    padding: 15px !important;
}

/* O visual do botão de texto puro */
a.btn-link-lateral {
    display: block !important;
    text-align: center !important;
    background-color: #f4f6f8 !important; /* Fundo cinza bem clarinho */
    color: #1a3a5c !important; /* Texto azul institucional */
    padding: 12px 15px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-weight: bold !important;
    font-size: 13px !important;
    border: 1px solid #e2e2e2 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04) !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* O efeito de Hover: Preenche de azul e força o texto branco */
body #column-two a.btn-link-lateral:hover {
    background-color: #1a3a5c !important; 
    color: #ffffff !important; 
    border-color: #1a3a5c !important;
    transform: translateY(-3px) !important; 
    box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important;
}

/* =========================================================
   5. BOTÕES DE MÍDIAS SOCIAIS (Efeito Flutuante)
   ========================================================= */

/* Container moderno com Flexbox para alinhar perfeitamente no centro */
.social-icons-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 25px !important; /* Espaçamento exato sem precisar de   */
    padding: 10px 0 20px 0 !important;
}

/* Preparação dos links/ícones */
.social-icons-container a {
    display: inline-block !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; /* Cria um efeito de "mola" super profissional */
}

/* Padroniza os ícones */
.social-icons-container a img {
    width: 48px !important; 
    height: auto !important;
    border: none !important;
}

/* O pulo do gato: Efeito de levitação com Drop Shadow */
.social-icons-container a:hover {
    transform: translateY(-8px) scale(1.15) !important; /* Pula pra cima e dá um leve zoom */
    /* O drop-shadow é mágico: ele faz a sombra seguir o contorno redondo/vazado do PNG! */
    filter: drop-shadow(0px 10px 10px rgba(0,0,0,0.25)) !important; 
}

/* =========================================================
   6. PRÓXIMOS EVENTOS (Organização Interna)
   ========================================================= */

/* Espaçamento e linha divisória entre os eventos */
body #column-two dl.portletEvents dd.portletItem {
    padding: 16px 15px !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

/* Título do evento (maior e com a cor institucional) */
body #column-two dl.portletEvents dd.portletItem a.tile {
    color: #1a3a5c !important;
    font-weight: bold !important;
    font-size: 14px !important;
    text-decoration: none !important;
    display: block !important;
    margin-bottom: 6px !important;
    transition: color 0.2s ease !important;
}

body #column-two dl.portletEvents dd.portletItem a.tile:hover {
    color: #3b73b9 !important; /* Azul mais claro ao passar o mouse */
}

/* Detalhes do evento (Data, hora e local) */
body #column-two dl.portletEvents .portletItemDetails {
    display: block !important;
    font-size: 12px !important;
    color: #666666 !important;
    line-height: 1.5 !important;
}

/* Rodapé do portlet de eventos ("Eventos anteriores...") */
body #column-two dl.portletEvents dd.portletFooter {
    background-color: #f8f9fa !important;
    padding: 12px 15px !important;
    text-align: center !important;
    border-top: 1px solid #eaeaea !important;
}

body #column-two dl.portletEvents dd.portletFooter a {
    color: #1a3a5c !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

body #column-two dl.portletEvents dd.portletFooter a:hover {
    text-decoration: underline !important;
}


/* =========================================================
   7. CALENDÁRIO (Modernização da Tabela)
   ========================================================= */

/* Espaçamento da caixa do calendário */
body #column-two dl.portletCalendar dd.portletItem {
    padding: 12px !important;
}

/* Ajuste da Tabela para ocupar 100% do espaço */
body #column-two table.ploneCalendar {
    width: 100% !important;
    border-collapse: collapse !important;
    border: none !important;
}

/* Cabeçalho dos dias da semana (Do, Se, Te, Qu...) */
body #column-two table.ploneCalendar th {
    background-color: #f4f6f8 !important;
    color: #444444 !important;
    font-weight: bold !important;
    padding: 8px 0 !important;
    text-align: center !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 12px !important;
}

/* Células dos dias comuns */
body #column-two table.ploneCalendar td {
    text-align: center !important;
    padding: 8px 0 !important;
    border: 1px solid #f8f9fa !important;
    color: #555555 !important;
    font-size: 13px !important;
}

/* Dias do mês anterior e próximo (Ficam mais "apagados") */
body #column-two table.ploneCalendar td.cal_prev_month,
body #column-two table.ploneCalendar td.cal_next_month {
    color: #cccccc !important;
    background-color: #fefefe !important;
}

/* Destaque para o DIA DE HOJE */
body #column-two table.ploneCalendar td.today {
    background-color: #1a3a5c !important;
    color: #ffffff !important;
    font-weight: bold !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 4px rgba(26,58,92,0.3) !important;
}

/* Destaque para dias com EVENTOS CADASTRADOS */
body #column-two table.ploneCalendar td.cal_has_events {
    background-color: #e6f0fa !important; /* Fundo azul clarinho */
    border-radius: 4px !important;
}

body #column-two table.ploneCalendar td.cal_has_events a {
    color: #1a3a5c !important;
    font-weight: bold !important;
    text-decoration: none !important;
    display: block !important;
}

body #column-two table.ploneCalendar td.cal_has_events a:hover {
    text-decoration: underline !important;
}

/* Setinhas de navegação dos meses (no cabeçalho azul) */
body #column-two dl.portletCalendar dt.portletHeader a.calendarPrevious,
body #column-two dl.portletCalendar dt.portletHeader a.calendarNext {
    color: #ffffff !important;
    font-size: 18px !important;
    padding: 0 10px !important;
    text-decoration: none !important;
    transition: transform 0.2s ease !important;
    display: inline-block !important;
}

body #column-two dl.portletCalendar dt.portletHeader a.calendarPrevious:hover {
    transform: translateX(-3px) !important;
}

body #column-two dl.portletCalendar dt.portletHeader a.calendarNext:hover {
    transform: translateX(3px) !important;
}

/* =========================================================
   8. BANNER / CARROSSEL (Área Central)
   ========================================================= */

/* Arredonda o container do carrossel e aplica sombra */
div.cover-carousel-tile {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1) !important;
    border: 1px solid #eaeaea !important;
}

/* Estilização da Legenda (Efeito de Vidro) */
div.cover-carousel-tile .galleria-info {
    background: rgba(26, 58, 92, 0.8) !important; /* Azul institucional com transparência */
    backdrop-filter: blur(5px); /* Efeito de desfoque no fundo da legenda */
    border-radius: 0 10px 0 0 !important;
    bottom: 15px !important;
    left: 15px !important;
    right: 15px !important;
    padding: 15px !important;
    height: auto !important;
    width: auto !important;
}

/* Título da Notícia no Banner */
div.cover-carousel-tile .galleria-info-title a {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

/* Descrição da Notícia no Banner */
div.cover-carousel-tile .galleria-info-description {
    color: #e0e0e0 !important;
    font-size: 14px !important;
    margin-top: 5px !important;
}

/* Setas de Navegação do Carrossel */
div.cover-carousel-tile .galleria-image-nav-left, 
div.cover-carousel-tile .galleria-image-nav-right {
    opacity: 0.6 !important;
    transition: opacity 0.3s ease !important;
}

div.cover-carousel-tile .galleria-image-nav-left:hover, 
div.cover-carousel-tile .galleria-image-nav-right:hover {
    opacity: 1 !important;
}

/* =========================================================
   9. BANNERS DE DESTAQUE (SAPL E OUVIDORIA)
   ========================================================= */

/* Aplica o estilo de Card nos containers dos banners */
#ad8fdac1fde84a87963937de8c8cfe3c, 
#f1db609007784534b22b1c05461dcac7 {
    margin-bottom: 25px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    border: 1px solid #eaeaea !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* Efeito de levitação ao passar o mouse */
#ad8fdac1fde84a87963937de8c8cfe3c:hover, 
#f1db609007784534b22b1c05461dcac7:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
}

/* Garante que a imagem dentro do banner ocupe todo o espaço e fique arredondada */
#ad8fdac1fde84a87963937de8c8cfe3c img, 
#f1db609007784534b22b1c05461dcac7 img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 10px !important;
}

/* =========================================================
   10. TÍTULO DOS PARLAMENTARES (Substituindo Imagem por Texto)
   ========================================================= */

.titulo-parlamentares-moderno {
    background-color: #1a3a5c !important; /* O mesmo azul dos seus menus */
    color: #ffffff !important;
    text-align: center !important;
    padding: 15px 20px !important;
    border-radius: 8px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 1.4em !important;
    margin: 30px auto 20px auto !important;
    width: fit-content !important; /* Faz a barra azul envolver o texto, não a tela toda */
    min-width: 300px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    border: none !important;
}

/* Ajuste para que a tile de texto rico não coloque margens estranhas */
#af9a46450a444b4cbc6718d1d92a00b4 .cover-richtext-tile {
    padding: 0 !important;
    background: transparent !important;
}
}