/* ===========================
   Estilos globais
=========================== */

html, body {
    height: 100%;
}

body {
    min-height: 100vh;
    background-color: #f5f5f5; /* Gainsboro */
    font-family: Arial, sans-serif; /* opcional */
    display: flex;
    flex-direction: column;
}

/* O bloco principal expande para empurrar o footer */
main {
    flex: 1;
}


/* =======================================
   Estilos das páginas iniciais (index)
======================================= */


/* ------ Estilos para a página inteira: ------- */

/* Parágrafos justificados */
.text-justify p {
  text-align: justify;
}

/* Classe para controlar a altura e a rolagem das colunas */
.conteudo-principal.conteudo-rolavel,
.conteudo-secundario.conteudo-rolavel {
  max-height: 65vh; /* 70% da altura da janela de visualização */
  overflow-y: auto; /* Adiciona barra de rolagem vertical quando necessário */
  width: 100%;      /* Garante que o conteúdo ocupe toda a largura da coluna */
}

/* ------ Estilos para o conteúdo principal: ------- */

/* Lidando com título principal */
.conteudo-principal :is(h1, h2, h3, h4, h5, h6) {
  text-align: center;
  margin-bottom: 1.5rem; /* espaço extra abaixo */
  font-weight: bold;
}

/* ------ Estilos para o conteúdo secundário: ------- */

.conteudo-secundario {
  max-height: 100%;   /* limita à altura da coluna */
  overflow-y: auto;   /* ativa scroll apenas quando ultrapassar */
}

/* Espaçamento entre títulos e os parágrafos subsequentes */
.conteudo-secundario :is(h1, h2, h3, h4, h5, h6) {
  margin-bottom: 1rem; /* aumenta espaço abaixo do título */
  font-weight: bold;
}

/* Reduz espaço quando houver dois <p> seguidos */
.conteudo-secundario p + p {
  margin-top: -0.6em;
}

/* ===========================
   Elementos gráficos do Painel
=========================== */
.grafico {
  /*border: 2px solid blue;*/
  padding: 10px;
  margin: 5px;
  background-color: white;
  border-radius: 20px;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 16 / 9; /* setar aspect-ratio evita o flickering na atualização dos gráficos */
}

.grafico > div {
  width: 100% !important;
  height: 100% !important;
}

.divisoria {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 5px;
  padding: 0;
}

.imagem {
  margin: 5px;
  width: 500px;
  height: 400px;
  border-radius: 20px;
}

.imagemsuperior {
  border: 2px solid blue;
  margin: 5px;
  width: 500px;
  height: 200px;
  border-radius: 20px;
}

/* Estilo base para os cards de KPI */
.kpi-card {
    border-left: 5px solid var(--card-color, #4169E1); /* O segundo valor é o padrão (fallback) */
    transition: transform 0.2s ease-in-out;
}

.kpi-card:hover {
    transform: translateY(-5px); /* Um leve efeito ao passar o mouse */
}

.kpi-icon {
    color: var(--card-color, #4169E1);
}

.kpi-value {
    color: #333;
    font-size: 2rem;
}

.kpi-label {
    font-size: 0.8rem;
    letter-spacing: 1px;
}

/* Diminuindo tamanho dos cards */

/* 1. Reduz o espaçamento interno (padding) de todos os cartões nesta coluna */
.conteudo-secundario .card-body {
    padding: 0.75rem 1rem !important; /* Original costuma ser 1.25rem ou mais */
}

/* 2. Reduz o tamanho do texto do título do cartão */
.conteudo-secundario .card-title, 
.conteudo-secundario h6 {
    font-size: 0.85rem !important;
    margin-bottom: 0.5rem !important;
}

/* 3. Reduz o tamanho da fonte do número gigante (ajuste a classe se necessário) */
.conteudo-secundario .card-text, 
.conteudo-secundario h2, 
.conteudo-secundario h3 {
    font-size: 1.5rem !important; /* Deixa o número mais discreto */
}
    
/* 4. Deixa os ícones dentro do cartão um pouco menores */
.conteudo-secundario .card-body i {
    font-size: 1.2rem !important;
}


/* =======================================
   Classe de Botão Personalizada: Azul UFRJ
======================================= */

  .btn-ufrj-blue {
    /* Cor de fundo principal: Azul da Navbar */
    background-color: #003366; 
    /* Cor da borda para combinar */
    border-color: #003366; 
    /* Cor do texto para garantir contraste */
    color: white; 
  }
  
  .btn-ufrj-blue:hover {
    /* Azul ligeiramente mais escuro (ou mais claro) para o efeito hover */
    background-color: #00254c; 
    border-color: #00254c;
    color: white;
  }
  
  /* Estilo para quando o botão estiver pressionado/ativo (foco) */
  .btn-ufrj-blue:focus,
  .btn-ufrj-blue:active {
    /* Mantenha a cor de fundo no foco/ativo e use uma sombra de foco que combine */
    background-color: #00254c !important; 
    border-color: #00254c !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 51, 102, 0.5); 
  }


/* ===================================================
   Navbar principal
   =================================================== */

/* Navbar em si */

.navbar {
    /* Define margem na esquerda e na direita */
    padding-left: 4rem; /* Ou um valor em rem, ex: 1.5rem */
    padding-right: 4rem;

}


/* O Bootstrap já costuma aplicar d-flex e align-items-center, mas este CSS garante: */
.navbar-brand {
    display: flex;
    align-items: center; /* 🎯 Centraliza verticalmente o logo e o título */
    /* Remove margens extras que podem ter sido definidas por outras regras do Bootstrap */
    padding-top: 0; 
    padding-bottom: 0;
}

/* Logo ufrj */
.logo-image {
  height: 48px; /* Reduza este valor se precisar que a navbar seja mais fina */
  width: auto; 
  vertical-align: middle; 
  margin-right: 15px;
}

/* Título navbar */
.navbar-title {
  color: #fff;
  margin: 0; /* Remove margens indesejadas */
  font-family: sans-serif;
  line-height: normal;
  font-weight: 500;
  text-transform: uppercase;
}

/* ===================================================
   estilos de menu off-canvas - para a barra de navegação
   =================================================== */

/* ---------------------------------------
   SEÇÃO 1: ESTRUTURA E LAYOUT GERAL
------------------------------------------ */

/* Ajuste da Largura do Menu Offcanvas */
#offCanvasMenu {
    width: 25vw; /* 25% da Largura da Viewport (1/4 de tela) */
}
@media (max-width: 768px) {
    #offCanvasMenu {
        width: 80vw; /* 80% da tela em celulares, para melhor usabilidade */
    }
}

/* Estilo para TUDO: Link Simples E Contêiner Pai (Aplica cor e altura) */
.custom-menu-links-parent,
.custom-menu-links .list-group-item-action {
    /* Padding para Altura e Recuo da Borda: 20px Vertical, 30px Horizontal */
    padding: 20px 30px; 
    color: #003366; 
    font-weight: bold;
    border-top: 1px solid #ddd;
    font-size: 1.1rem;
    cursor: pointer;
}

/* Estilo para régua horizontal */
.hr-ufrj {
    border-top: 5px solid #003366;
    opacity: 1;
}

/* ---------------------------------------
   SEÇÃO 2: LINK E BOTÃO TOGGLE 
------------------------------------------ */

/* O link principal (texto) */
.list-group-item-link {
    flex-grow: 1; 
    text-decoration: none; 
    color: inherit; 
    display: flex;
    align-items: center; 
    
    /* DIVISÓRIA: Borda no Link Principal */
    border-right: 1px solid #e0e0e0; 
    padding-right: 15px; /* Espaço entre a borda e o botão */
}

/* O botão de expansão do collapse (seta) - MAIOR ÁREA CLICÁVEL */
.custom-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #003366;
    
    /* 1. AUMENTA O TAMANHO DO ÍCONE */
    font-size: 1.5em; 
    
    /* 2. AUMENTA O ALVO DE CLIQUE com padding */
    padding: 10px 20px; 

    /* 3. SEPARAÇÃO E ALINHAMENTO */
    margin-right: 0; /* Alinha o botão com o padding de 30px do pai */
    margin-left: 10px; /* Mantém a separação da borda */

    /* Garante a centralização vertical do ícone */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------------------------------------
   SEÇÃO 3: SUB-ITENS E HOVER UNIFICADOS
------------------------------------------ */

/* Estilo dos Sub-itens (dropdowns internos) */
.custom-menu-links .sub-item {
    padding: 15px 30px 15px 40px; /* Recuo à esquerda de 40px */
    font-weight: normal;
    font-size: 1rem;
    background-color: #f8f8f8; 
    border-top: none;
    border-bottom: 1px solid #eee;
    color: #003366;
}

/* 1. HOVER DO FUNDO SUAVE (Aplica a cor de fundo #f0f0f0 em TODOS os itens) */
.custom-menu-links-parent:hover,
.custom-menu-links .list-group-item-action:hover,
.custom-menu-links .sub-item:hover {
    background-color: #f0f0f0; 
}

/* 2. HOVER DE TEXTO (Aplica sublinhado em TODOS os links) */
.list-group-item-link:hover,
.custom-menu-links .list-group-item-action:hover {
    text-decoration: underline;
}

/* 3. HOVER DO BOTÃO (Fica vermelho/acento) */
.custom-toggle-btn:hover {
    color: #cd2653; 
}

/* Estilo para a seta girar no CLIQUE */
.custom-toggle-btn[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
    transition: transform 0.3s ease-in-out;
}
.custom-toggle-btn[aria-expanded="false"] .fa-chevron-down {
    transform: rotate(0deg);
    transition: transform 0.3s ease-in-out;
}


/* ---------------------------------------
   SEÇÃO 4: HOVER FLUTUANTE (FLYOUT) - APENAS DESKTOP
------------------------------------------ */

@media (min-width: 992px) {
    /* 1. Remove a trava de corte da barra lateral para o menu poder "vazar" à esquerda */
    .offcanvas-body {
        overflow: visible !important;
    }

    /* 2. Define o grupo como ponto de origem para a caixa flutuante */
    .nav-item-group {
        position: relative;
    }

    /* 3. Cria a caixa voadora (herdando a cor #f8f8f8 dos seus sub-itens) */
    .nav-item-group .collapse {
        position: absolute;
        top: 0;
        right: 100%;             /* Posiciona à esquerda da barra */
        width: 250px;            
        background-color: #f8f8f8; 
        box-shadow: -5px 5px 15px rgba(0,0,0,0.1); 
        border: 1px solid #ddd;  /* Borda combinando com o seu design */
        border-right: none;      /* Cola na barra principal */
        border-radius: 8px 0 0 8px; 
        z-index: 1060;           
        display: none;           /* Oculto por padrão */
    }

    /* 4. Dispara a caixa voadora ao passar o mouse */
    .nav-item-group:hover .collapse {
        display: block !important;
    }

    /* 5. Gira a setinha para a ESQUERDA no hover (sobrepondo a animação de clique) */
    .nav-item-group:hover .custom-toggle-btn .fa-chevron-down {
        transform: rotate(90deg) !important; 
    }

    /* 6. Ajustes finos nas bordas dos sub-itens DENTRO da caixa voadora */
    .nav-item-group .collapse .sub-item {
        border-bottom: 1px solid #ddd;
    }
    .nav-item-group .collapse .sub-item:first-child {
        border-radius: 8px 0 0 0; /* Arredonda o topo esquerdo do primeiro item */
    }
    .nav-item-group .collapse .sub-item:last-child {
        border-bottom: none;
        border-radius: 0 0 0 8px; /* Arredonda a base esquerda do último item */
    }
}


/* =======================================
   Breadcrumbs: Estilo Chevron com Fundo Colorido
======================================= */

.custom-breadcrumb-container-full {
    /* Fundo Azul UFRJ em toda a linha */
    background-color: #003366; 
    padding: 0.5rem 4.5rem; /* Padding para dar espaço vertical e horizontal */
    border-radius: 0; /* Remove cantos arredondados, fica como uma barra */
    margin-bottom: 20px; /* Espaço abaixo da barra */
}

/* O elemento <ol> interno */
.custom-breadcrumb-container-full .breadcrumb {
    /* Remove padding/margem padrão do Bootstrap na lista <ol> */
    padding: 0; 
    margin: 0;
    /* Define o separador como seta (>) usando a variável CSS do Bootstrap */
    --bs-breadcrumb-divider: '>'; 
    background-color: transparent; /* Garante que o fundo seja o do container pai */
}

/* 1. Links (Itens não-ativos) */
.custom-breadcrumb-container-full .breadcrumb-item a {
    /* Links brancos para contraste com o fundo azul */
    color: white; 
    text-decoration: none;
    font-weight: 500;
}

.custom-breadcrumb-container-full .breadcrumb-item a:hover {
    /* Cor de acento (vermelho/vinho) no hover */
    color: #cd2653; 
    text-decoration: underline; 
}

/* 2. Item Ativo (O último item) */
.custom-breadcrumb-container-full .breadcrumb-item.active {
    /* Cor cinza claro para o item atual */
    color: #ccc; 
    font-weight: 600;
}

/* 3. Cor da Divisória (Chevron) */
/* O separador herda a cor do texto do item anterior, mas podemos forçá-lo a ser mais claro */
.custom-breadcrumb-container-full .breadcrumb-item::before {
    color: #aaa; /* Cor mais suave para o separador */
    opacity: 1;
}

/* =======================================
   Estilos do Footer (Rodapé)
======================================= */

/* Container Principal do Footer (mantido, apenas o HTML mudou para container-fluid) */
#custom-site-footer {
    background-color: #3d3d3d;
    color: white;
    font-size: 0.85rem; /* Reduzido o tamanho da fonte */
    margin-top: 20px;
    padding-left: 4rem; /* Ou um valor em rem, ex: 1.5rem */
    padding-right: 4rem;
}

/*tamanho do texto*/
#custom-site-footer p {
    font-size: 1rem;  /* ajuste como quiser */
}


/* Conteúdo principal do footer */
.footer-content-main {
    align-items: center !important;
}


/* 1. Coluna Esquerda: Logo e Endereço (lado a lado) */
.footer-col-left {
    /* O d-flex no HTML já garante o alinhamento horizontal */
    align-items: center !important; /* Centraliza verticalmente o logo com o endereço */
}
.footer-ufrj-logo  {
    max-width: 200px; /* Logo menor para caber ao lado do endereço */
    height: auto;
}

.footer-institutionals-logos img {
    max-height: 60px; /* Tamanho dos outros logos institucionais */
    height: auto;
}


.footer-address {
    line-height: 1.5;
    margin: 0; /* Remove margens extras */
}

/* 2. Coluna Direita: Logos e Desenvolvido por (lado a lado) */
.footer-col-right {
    /* O d-flex justify-content-end no HTML já empurra para a direita */
    align-items: center !important; /* Alinha tudo verticalmente no meio */
}


.developed-by-text {
    font-weight: 500;
    margin-bottom: 0.2rem !important; /* Compacta o texto sobre o logo */
}

.footer-divider-bottom {
    margin-bottom: 0.1rem;
}

.gid-link {
    display: block;
    max-width: 250px;
    margin: 0 auto;       /* centraliza */
    white-space: normal;  /* força quebras de linha */
}

/*NAVBAR CONFIGURACAO ADICIONAL*/
/* Aplica o hover apenas em telas maiores que 992px (Desktop) */
@media (min-width: 992px) {
    /* Mostra o submenu quando o mouse estiver no pai ou no próprio submenu */
    .custom-menu-links-parent:hover + .collapse,
    .collapse:hover {
        display: block !important;
    }

    /* Opcional: rotaciona a setinha automaticamente no hover */
    .custom-menu-links-parent:hover .custom-toggle-btn i {
        transform: rotate(180deg);
        transition: transform 0.3s ease;
    }
}

/* 1. Abre as opções quando o mouse passar por cima da div "Pesquisa" (ou "Pós-Graduação") */
.custom-menu-links-parent:hover + .collapse {
    display: block !important;
}

/* 2. Mantém as opções abertas enquanto o mouse estiver navegando por elas ("Produção", "Impacto"...) */
.collapse:hover {
    display: block !important;
}

.custom-menu-links-parent:hover .custom-toggle-btn i,
.collapse:hover ~ .custom-menu-links-parent .custom-toggle-btn i {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.custom-toggle-btn i {
    transition: transform 0.3s ease;
}

/* Aplica o efeito APENAS EM DESKTOPS (>992px) para não quebrar o celular */
@media (min-width: 992px) {
    
    /* 1. Permite que o submenu "vaze" para fora da barra lateral sem ser cortado */
    .offcanvas-body {
        overflow: visible !important;
    }

    /* 2. Transforma cada grupo na "âncora" para o submenu flutuante */
    .nav-item-group {
        position: relative;
    }

    /* 3. Configura a nova caixa flutuante à esquerda */
    .nav-item-group .collapse {
        position: absolute;
        top: 0;           /* Alinha o topo da caixa com o botão */
        right: 100%;      /* Joga a caixa 100% para a ESQUERDA da barra lateral */
        width: 250px;     /* Define a largura do submenu flutuante */
        
        /* Estética da caixa flutuante */
        background-color: #ffffff;
        box-shadow: -5px 5px 15px rgba(0,0,0,0.1); /* Sombra elegante à esquerda */
        border: 1px solid #e0e0e0;
        border-right: none;          /* Cola na barra principal sem linha de divisão */
        border-radius: 8px 0 0 8px;  /* Arredonda apenas os cantos esquerdos */
        z-index: 1060;               /* Garante que fique por cima do resto do site */
        
        display: none;    /* Esconde por padrão */
    }

    /* 4. Mostra o submenu quando o mouse passa no grupo */
    .nav-item-group:hover .collapse {
        display: block !important;
    }

    /* 5. Estiliza os itens de dentro da nova caixa para ficarem alinhados */
    .nav-item-group .collapse .sub-item {
        border: none;
        border-bottom: 1px solid #f0f0f0;
    }
    .nav-item-group .collapse .sub-item:last-child {
        border-bottom: none;
    }

    /* 6. Vira a setinha para a ESQUERDA (já que o menu abre para lá!) */
    .nav-item-group:hover .custom-toggle-btn i {
        transform: rotate(90deg); /* Transforma o chevron-down em chevron-left */
    }
}