/* =================================================================
               Estilo para blocos de FQA
* ================================================================= */

.faq-container {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fonte usada em toda a área FAQ */
  max-width: 800px;          /* Largura máxima do container */
  margin: 40px auto;         /* Espaço em cima e embaixo; centraliza horizontalmente */
  padding: 25px 30px;        /* Espaçamento interno do container */
  background-color: #ffffff; /* Cor de fundo branca */
  border-radius: 12px;       /* Bordas arredondadas */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Sombra suave para dar profundidade */
  color: #222222;            /* Cor do texto padrão */
  border-left: 5px solid #3f6e6c; /* Borda à esquerda para destaque */
}

.faq-container h2 {
  
  color: #688f8d;             /* Cor azul para o título */
  border-bottom: 4px solid #688f8d; /* Linha azul abaixo do título */
  padding-bottom: 10px;       /* Espaço entre texto e linha */
  margin-bottom: 30px;        /* Espaço abaixo do título */
  font-weight: 700;           /* Negrito */
  font-size: 2rem;            /* Tamanho grande para o título */
}

.faq-container p {
  font-size: 1.5rem;          /* Tamanho maior para o texto da introdução */
  line-height: 1.6;           /* Espaçamento entre linhas para melhor leitura */
  margin-bottom: 35px;        /* Espaço abaixo do parágrafo */
  font-weight: 600;           /* Texto um pouco mais destacado */
  color: #333333;             /* Cor do texto um pouco mais escura */
}

details {
  margin-bottom: 16px;        /* Espaço entre cada bloco de pergunta */
  border: 1px solid #f9f9f9; /* Borda cinza clara */
  border-radius: 6px;         /* Bordas arredondadas */
  padding: 0 15px;            /* Espaço horizontal interno */
  background-color: #f9f9f9;  /* Fundo azul clarinho */
  transition: background-color 0.3s ease; /* Animação suave na mudança de cor */
}

details[open] {
  background-color: #f9f9f9;  /* Cor de fundo quando o bloco está aberto */
}

summary {
  list-style: none;           /* Remove marcador padrão da lista */
  font-weight: bold;          /* Texto em negrito */
  font-size: 1.5rem;          /* Tamanho do texto da pergunta */
  color: #688f8d;             /* Cor azul escuro para o texto da pergunta */
  cursor: pointer;            /* Cursor de mão para indicar clicável */
  padding: 15px 0;            /* Espaço vertical dentro do sumário */
  position: relative;         /* Para posicionar o ícone de + / – */
}

summary::after {
  content: '+';               /* Ícone de “mais” para o botão de abrir */
  position: absolute;         /* Posicionado relativamente ao summary */
  right: 0;                   /* No canto direito */
  top: 15px;                  /* Alinhado verticalmente */
  font-size: 1.4rem;          /* Tamanho do ícone */
  color: #688f8d;             /* Cor azul do ícone */
  transition: transform 0.3s ease; /* Transição suave para rotação (se usada) */
}

details[open] summary::after {
  content: '–';               /* Quando aberto, o ícone vira “menos” */
  color: #688f8d;             /* Mantém a cor azul */
}

details div {
  padding: 0 0 15px 0;        /* Espaçamento abaixo do texto da resposta */
  color: #444;                /* Cor do texto da resposta */
  line-height: 1.6;           /* Espaçamento entre linhas */
}





/* =================================================================
                      Estilo de cabeçalho 
 * ================================================================= */

/* Cabeçalho */

html {
    line-height: 1.15; /* Define a altura padrão entre linhas do HTML */
    -ms-text-size-adjust: 100%;        /* Para Internet Explorer: evita ajustes automáticos no tamanho do texto */
    -webkit-text-size-adjust: 100%;    /* Para Safari/Chrome: evita ajustes automáticos no tamanho do texto */
}
body {
    margin: 0; /* Remove a margem padrão do corpo da página */
}

#headerNavigationContainer {
    background-color: #688f8d; /* Cor de fundo do cabeçalho/menu */
    border: 4px solid #688f8d; /* Borda de mesma cor que o fundo (funciona como uma espessura extra de fundo) */
    padding: 5px 0;            /* Espaçamento vertical interno (topo e base) */
    overflow: visible;         /* Garante que qualquer conteúdo extra fora do limite do container continue visível */
}


/* Container da logo */
.navbar-brand {
    display: flex;                 /* Usa Flexbox para alinhar itens internos (geralmente a imagem da logo) */
    justify-content: center;      /* Centraliza horizontalmente a logo */
    align-items: center;          /* Centraliza verticalmente a logo */
    height: 120px;                /* Define uma altura fixa para o container da logo */
    margin-bottom: 0;             /* Remove margem inferior (evita espaçamento desnecessário abaixo da logo) */
    overflow: visible;            /* Garante que conteúdo transbordando continue visível */
}

/* LOGO MAIOR E LIGEIRAMENTE MAIS BAIXA */
.navbar-brand-logo img,
.navbar-brand img {
    height: auto;             /* A altura da imagem será proporcional à largura (mantém a proporção) */
    width: 280px;             /* Define uma largura fixa para a logo — você pode ajustar conforme necessário */
    display: block;           /* Garante que o elemento seja renderizado como bloco, removendo espaços extras */
    max-height: none;         /* Remove qualquer limitação de altura máxima */
    margin-top: 45px;          /* Ajusta a posição vertical da logo (nesse caso, sem margem superior) */
}


/* MENU */
#main-navigation {
    display: flex;                    /* Usa Flexbox para organizar os itens do menu */
    justify-content: flex-start;     /* Alinha os itens do menu à esquerda */
    margin-top: 100px;               /* Adiciona espaço acima do menu (empurra para baixo) */
    color: #ffffff !important;       /* Define a cor do texto como branco (forçado com !important) */
    align-items: center;             /* Alinha verticalmente os itens do menu ao centro */
    font-size: 2 rem;                /* Define o tamanho da fonte — há um pequeno erro aqui: deve ser `2rem` (sem espaço) */
}

/* ESTILO DOS LINKS DO MENU */
#main-navigation > li > a {
    color: #ffffff !important;       /* Define a cor dos links como branco (forçado com !important) */
    margin-top: 20px;                /* Adiciona um espaçamento acima de cada link */
}

/* EFEITO AO PASSAR O MOUSE NOS LINKS DO MENU */
#main-navigation > li > a:hover {
    background-color: #688f8d !important; /* Altera o fundo quando o mouse passa por cima */
    color: #ffffff !important;            /* Mantém a cor do texto em branco no hover */
}



/* CAMPO DE BUSCA */
/* Envolve o formulário num container para controlar o espaço */
.pkp_structure_page .pull-md-right {
  display: flex;
  justify-content: center; /* centraliza horizontalmente */
  margin-top: 40px !important; /* força o espaçamento para baixo */
}

/* Formulário: mantém o layout em linha */
.pkp_structure_page form[method="get"] {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 300px; /* controla largura máxima */
}

/* Campo de busca */
.pkp_structure_page form[method="get"] input[type="text"] {
  padding: 5px 10px;
  border-radius: 3px;
  border: 1px solid #688f8d;
  background-color: #688f8d !important;
  height: 33px;
  box-sizing: border-box;
  flex-grow: 1;
}

/* Botão buscar */
.pkp_structure_page form[method="get"] input[type="submit"] {
  background: white;
  border: 1px solid #ffffff;
  padding: 5px 12px;
  font-style: italic;
  color: #688f8d;
  margin-top: 0;
  height: 33px;
  cursor: pointer;
}


/* MENU SUSPENSO: estilo base dos sublinks */
.navbar-nav .dropdown-menu > li > a {
    background-color: white !important;  /* Fundo branco nos itens do dropdown */
    color: #688f8d !important;           /* Cor do texto igual à cor principal */
    padding: 10px 16px;                  /* Espaçamento interno confortável */
    display: block;                      /* Ocupa a largura toda do item */
    text-decoration: none;              /* Remove sublinhado dos links */
    justify-content: flex-start;        /* OBS: esta propriedade não tem efeito aqui, pois <a> não é um flex container */

}
/* HOVER (AO PASSAR O MOUSE) PARA SUBMENUS */
.navbar-nav .dropdown-menu > li > a:hover,
.navbar-nav .dropdown-menu > li > a:focus,
.navbar-nav .dropdown-menu > li.active > a {
    background-color: #688f8d !important;  /* Fundo azul-petróleo no hover/focus */
    color: #ffffff !important;             /* Texto branco no hover/focus */
}


body.pkp_page_login .pkp_site_name_wrapper {
    display: block !important;
}

/* =================================================================
                          Medalha
 * ================================================================= */

/* Adicione 'position: relative' ao elemento pai para que a medalha
   se posicione corretamente dentro do cabeçalho. */
header#headerNavigationContainer {
  position: relative;
  overflow: visible;
}

/* CSS corrigido e responsivo para a medalha */
header#headerNavigationContainer::before {
  content: "";
  position: absolute;
  top: -30px;
  right: 25%;
  transform: translateX(50%);
  width: 25vw;
  height: 25vw;
  max-width: 230px;
  max-height: 230px;
  background-image: url('/public/journals/5/09.png'); /* Caminho relativo */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 9999;
  pointer-events: none;
  
}


/* Ajustes para telas de tablets (até 768px de largura) */
@media (max-width: 768px) {
  header#headerNavigationContainer::before {
    max-width: 150px; /* Diminui a medalha em telas menores */
    top: -15px;
    right: 15%;
  }
}

/* Em telas de celular (até 480px), a medalha é escondida para não poluir */
@media (max-width: 480px) {
  header#headerNavigationContainer::before {
    display: none;
  }
}

/* Garante que a medalha não apareça em outros cabeçalhos da página */
@keyframes rotacaoEsquerdaDireita {
  0%   { transform: translateX(50%) rotate(-15deg); }
  50%  { transform: translateX(50%) rotate(15deg); }
  100% { transform: translateX(50%) rotate(-15deg); }
}

header#headerNavigationContainer::before {
  animation: rotacaoEsquerdaDireita 2s ease-in-out infinite;
  transform-origin: center top; /* Faz a rotação parecer pendular */
}





/* =================================================================
             ESTILO PERSONALIZADO PARA BOTÃO PDF 
 * ================================================================= */


a.galley-link.btn.btn-primary.pdf {
    display: inline-block;               /* Permite definir largura/altura/padding no link */
    padding: 0 1em;                      /* Espaçamento horizontal dentro do botão (0 em cima/baixo, 1em nas laterais) */
    background: #688f8d !important;      /* Fundo verde escuro, forçado com !important */
    border: 1px solid #688f8d !important;/* Borda da mesma cor do fundo (cria um botão sólido) */
    border-radius: 3px;                  /* Arredonda levemente os cantos do botão */
    font-size: .93rem;                   /* Tamanho da fonte um pouco menor que o padrão */
    line-height: calc(2.143rem - 2px);   /* Altura da linha ajustada para alinhar verticalmente o texto */
    color: #ffffff !important;           /* Texto branco, também forçado */
    text-decoration: none;               /* Remove o sublinhado do link */
    cursor: pointer;                     /* Mostra a mãozinha ao passar o mouse (como um botão real) */
}

/* Hover PDF */
a.galley-link.btn.btn-primary.pdf:hover,
a.galley-link.btn.btn-primary.pdf:focus {
    background: #688f8d !important;     /* Mantém a cor de fundo verde escuro ao passar o mouse ou focar */
    border-color: #688f8d !important;   /* Borda na mesma cor do fundo */
    color: #ffffff !important;          /* Texto branco para contraste */
}

/* Botão "Ver todas as edições" */

a[href*="issue/archive"] {
    background-color: #688f8d !important;      /* Fundo verde escuro */
    border: 1px solid #688f8d !important;      /* Borda da mesma cor */
    color: #fff !important;                    /* Texto branco */
    padding: 10px 16px !important;             /* Espaçamento interno (vertical e horizontal) */
    border-radius: 4px !important;             /* Cantos levemente arredondados */
    display: inline-block !important;          /* Permite aplicar largura/altura e padding */
    text-decoration: none !important;          /* Remove o sublinhado */
}



/* =================================================================
 Estilo para blocos de anúncios ou notícias na página inicial 
 * ================================================================= */

.announcement-summary {
  border-left: 8px solid #3f6e6c; /* borda verde mais grossa */
  background-color: #ffffff;       /* fundo branco limpo */
  padding: 20px 25px;              /* espaçamento interno maior */
  margin-bottom: 40px;             /* espaçamento entre os blocos */
  border-radius: 8px;              /* cantos mais arredondados */
  box-shadow: 0 4px 8px rgba(63, 110, 108, 0.15); /* sombra mais forte, tom verde */
  transition: box-shadow 0.3s ease; /* animação suave para sombra */
}

.announcement-summary:hover {
  box-shadow: 0 8px 16px rgba(63, 110, 108, 0.3); /* sombra mais intensa ao passar o mouse */
}

.announcement-summary .media-heading a {
  color: #3f6e6c;                  /* título na cor verde */
  font-weight: 600;                /* título com peso médio */
  text-decoration: none;           /* sem sublinhado */
  transition: color 0.3s ease;     /* transição suave na cor */
}

.announcement-summary .media-heading a:hover {
  color: #28504d;                  /* tom mais escuro no hover */
  text-decoration: underline;     /* sublinhado no hover */
}

.announcement-summary .date {
  color: #7a7a7a;                  /* cor cinza para data */
  font-size: 0.9em;                /* fonte menor para data */
  margin-bottom: 12px;             /* espaço abaixo da data */
}

.announcement-summary p {
  color: #444444;                  /* texto do anúncio em cinza escuro */
  line-height: 1.6;                /* espaçamento entre linhas */
  font-size: 1em;                  /* tamanho de fonte confortável */
}

.media-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.announcement-summary {
  flex: 1 1 calc(50% - 20px);
  box-sizing: border-box;
}



/* ======================================================================================================
 ESTILOS PARA BOTÕES PERSONALIZADOS NO OJS 
/* Aplica a todos os botões com as classes .cmp_button_wire, .obj_galley_link e .obj_galley_link.pdf
 * ====================================================================================================== */


.cmp_button_wire,
.obj_galley_link,
.obj_galley_link.pdf {
    display: inline-block;           /* Permite largura e altura como bloco, mas se comporta como elemento em linha */
    padding: 0 1em;                  /* Espaçamento interno horizontal (1em à esquerda e direita) */
    background: #fff;                /* Fundo branco para aparência "leve" */
    border: 1px solid #3f6e6c;       /* Borda com cor institucional (verde escuro) */
    border-radius: 3px;              /* Bordas levemente arredondadas */
    font-size: .93rem;               /* Tamanho da fonte um pouco menor que o padrão */
    line-height: calc(2.143rem - 2px); /* Altura da linha ajustada para o botão ficar visualmente equilibrado */
    color: #3f6e6c;                  /* Cor do texto igual à borda */
    text-decoration: none;           /* Remove sublinhado dos links */
  
}

/* ===== EFEITOS DE INTERAÇÃO: PASSAR O MOUSE (HOVER) OU FOCO COM TECLADO (FOCUS) ===== */
/* Aplica efeito quando o usuário passa o mouse ou navega com teclado */
.cmp_button_wire:hover,
.cmp_button_wire:focus,
.obj_galley_link:hover,
.obj_galley_link:focus,
.obj_galley_link.pdf:hover,
.obj_galley_link.pdf:focus {
    background: #3f6e6c !important;  /* Altera o fundo para verde escuro institucional */
    color: #ffffff !important;       /* Muda o texto para branco para bom contraste */
    border-color: #3f6e6c !important;/* Garante que a borda continue com a mesma cor */
    
}


/* Quebra de linha e largura máxima para o botão de download */
div.download a.galley-link {
    white-space: normal !important; /* Permite quebra de linha */
    word-wrap: break-word;          /* Quebra palavras longas se necessário */
    max-width: 100%;                 /* Não passa do contêiner */
    display: inline-block;           /* Garante o comportamento de bloco */
    text-align: center;              /* Centraliza o texto */
}


/* ===== EFEITOS DE INTERAÇÃO:  no cabelho ===== */

#headerNavigationContainer .row a {
  display: inline-block;
  width: auto;
  box-sizing: border-box;
  background: linear-gradient(135deg, #557977, #4a8d4a);
  border: none;
  color: #fff;
  border-radius: 8px;
  padding: 6px 16px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;
  margin-left: 8px;
}

#headerNavigationContainer .row a:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  background: linear-gradient(135deg, #557977, #4a8d4a);
}

#headerNavigationContainer .row a:active {
  transform: translateY(1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* botão desabilitado */
#headerNavigationContainer .row a.acesso {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  background: #a3b8a1;
}



/* ======================================================================================================
                                Edições Anteriores - Layout Moderno 
 * ====================================================================================================== */
/* Supondo que o título "Edições anteriores" tenha a classe .page-title ou similar */


.issue-card {
  border: none;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  margin-bottom: 25px;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.issue-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.issue-card img {
  max-width: 100%;
  height: auto;
  margin: 15px auto 10px;
  display: block;
}

.issue-card .card-body {
  flex-grow: 1;
  padding: 15px;
}

.issue-card .card-title {
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 5px;
}

.issue-card .card-subtitle {
  font-size: 0.95em;
  color: #666;
  margin-bottom: 10px;
}

.issue-card .btn {
  margin-top: 10px;
  background-color: #3f6e6c;
  border-color: #3f6e6c;
  
}

.issue-card .btn:hover {
  background-color: #3f6e6c;
  border-color: #3f6e6c;
  
}

.year-heading {
  font-size: 1.8em;
  font-weight: bold;
  margin: 30px 0 20px;
  border-bottom: 3px solid #3f6e6c;
  padding-bottom: 5px;
  color: #3f6e6c;
}




/* ======================================================================================================
             Container dos artigos usando grid para organizar os artigos em colunas responsivas 
 * ====================================================================================================== */

.issues > .col-xs-12:first-child::before {
  content: "Edições Anteriores";
  display: block;
  text-align: center;
   font-size: 4rem;
  color: #557977;
  padding-bottom: 10px;
  margin-bottom: 40px;
  font-weight: 700;
  
}



.issue-archive-list {
  display: grid; /* ativa o grid layout */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); 
  /* cria colunas que têm no mínimo 320px e ocupam o máximo disponível, criando quantas couberem */
  gap: 25px; /* espaço entre as colunas e linhas */
  padding: 10px 0; /* espaçamento vertical no container */

}

/* Estiliza cada bloco de artigo */
.article-summary.media {
  border: 1px solid #ddd; /* borda cinza clara */
  border-radius: 8px; /* cantos arredondados */
  padding: 15px; /* espaçamento interno */
  background-color: #fff; /* fundo branco */
  box-shadow: 0 0 4px rgba(0,0,0,0.05); /* sombra leve */
  display: flex; /* usa flexbox para alinhar conteúdos */
  align-items: flex-start; /* alinha no topo */
  gap: 15px; /* espaçamento entre imagem e texto (se houver imagem) */
  transition: box-shadow 0.3s ease; /* transição suave para efeito hover */
  border-left: 8px solid #3f6e6c; /* borda verde mais grossa */
}

/* Efeito quando passa o mouse sobre o artigo */
.article-summary.media:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.12); /* sombra mais forte */
}

/* Estiliza o título do artigo */
.article-summary.media .media-body .media-heading a {
  font-weight: 700; /* negrito */
  font-size: 1.5rem; /* tamanho da fonte um pouco maior */
  color: #3f6e6c; /* tom azul escuro */
  text-decoration: none; /* remove sublinhado padrão */
  line-height: 1.3; /* espaçamento entre linhas */
}

/* Efeito no link do título ao passar o mouse */
.article-summary.media .media-body .media-heading a:hover {
  color: #3f6e6c; /* tom mais escuro de azul */
  text-decoration: underline; /* sublinha o título */
}

/* Estiliza o nome dos autores */
.article-summary.media .meta .authors {
  font-size: 0.9rem; /* fonte menor */
  color: #555; /* cinza médio */
  margin: 8px 0 12px; /* espaçamento acima e abaixo */
}

/* Botão PDF - cor principal e estilo de botão */
.article-summary.media .btn-group a.galley-link.btn {
 display: inline-block;
  background-color: #688f8d !important;
  border: none;
  color: #fff !important;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 6px 12px;
  border-radius: 4px;
  text-decoration: none;
  white-space: normal; /* Quebra texto longo */
  max-width: 100%; /* Evita ultrapassar a capa */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: background-color 0.3s ease;
}

/* Efeito hover no botão PDF */
.article-summary.media .btn-group a.galley-link.btn:hover {
  background-color: #557977 !important; /* tom mais escuro */
  border-color: #557977 !important;
  color: white !important;
}

/* Botão "Ver Todas as Edições" - estilo parecido com o botão PDF, mas maior */
a.btn.read-more {
  display: inline-block; /* faz o link se comportar como botão */
  margin-top: 30px; /* distância do conteúdo acima */
  background-color: #688f8d !important;
  border-color: #688f8d !important;
  color: white !important;
  padding: 10px 24px; /* botão maior */
  border-radius: 6px; /* cantos arredondados */
  font-weight: 700; /* negrito */
  text-decoration: none; /* remove sublinhado */
  transition: background-color 0.3s ease;
}

/* Efeito hover no botão "Ver Todas as Edições" */
a.btn.read-more:hover {
  background-color: #557977 !important;
  border-color: #557977 !important;
  color: white !important;
}

/* Ajusta margem superior do container que envolve os artigos */
section.issue-archive-list {
  margin-top: 20px;
}


/* ======================================================================================================
           Animação de giro para navegadores WebKit (Chrome, Safari) 
 * ====================================================================================================== */



@-webkit-keyframes pkp_spin {
    0% {
        transform: rotateZ(-360deg);
        -webkit-transform: rotateZ(-360deg);
        -moz-transform: rotateZ(-360deg);
        -o-transform: rotateZ(-360deg);
    }
    100% {
        transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg);
        -moz-transform: rotateZ(0deg);
        -o-transform: rotateZ(0deg);
    }
}

/* Animação de giro para navegadores Firefox */


@-moz-keyframes pkp_spin {
    0% {
        transform: rotateZ(-360deg);
        -webkit-transform: rotateZ(-360deg);
        -moz-transform: rotateZ(-360deg);
        -o-transform: rotateZ(-360deg);
    }
    100% {
        transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg);
        -moz-transform: rotateZ(0deg);
        -o-transform: rotateZ(0deg);
    }
}

/* Animação de giro para navegadores Opera */
@-o-keyframes pkp_spin {
    0% {
        transform: rotateZ(-360deg);
        -webkit-transform: rotateZ(-360deg);
        -moz-transform: rotateZ(-360deg);
        -o-transform: rotateZ(-360deg);
    }
    100% {
        transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg);
        -moz-transform: rotateZ(0deg);
        -o-transform: rotateZ(0deg);
    }

  }




/* ======================================================================================================
                                            botão
 * ====================================================================================================== */

 
/* Container principal da sidebar */
#sidebar {
  max-width: 300px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
}

/* Todos os blocos dentro da sidebar */
#sidebar .pkp_block {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 20px 18px;
  margin-bottom: 25px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.25s ease;
}

#sidebar .pkp_block:hover {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

/* Títulos principais dos blocos com classe title e h3 */
#sidebar .pkp_block h2.title,
#sidebar .pkp_block h3 {
  color: #557977;
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 15px;
  border-bottom: 3px solid #557977;
  padding-bottom: 6px;
  background-color: #f0f0f0; /* fundo cinza */
  border-radius: 10px 10px 0 0; /* cantos arredondados no topo */
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 8px;
}

/* Estilo exclusivo para o bloco "Qualis B2" */
#sidebar .pkp_block.qualis-title {
  color: #557977;
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 15px;
  border-bottom: 3px solid #557977;
  padding: 8px 12px 6px 12px;
  background-color: #f0f0f0;
  border-radius: 10px 10px 0 0;
}
/* Estilo para o bloco "Palavras-chave" com aparência igual ao de Indexadores */
#sidebar .pkp_block.block_Keywordcloud {
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  padding: 12px;
}

/* Título do bloco "Palavras-chave" */
#sidebar .pkp_block.block_Keywordcloud > h2 {
  font-size:1.25rem;
  color: #336666;
  font-weight: 700;
  border-bottom: 3px solid #336666;
  padding-bottom: 4px;
  margin-bottom: 12px;
}


/* Títulos menores dentro dos blocos */
#sidebar .pkp_block h4 {
  font-weight: 600;
  background-color: transparent !important;
  margin-bottom: 10px;
}


/* Links dentro dos blocos */
#sidebar .pkp_block a {
  color: #557977;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

#sidebar .pkp_block a:hover {
  text-decoration: underline;
  color: #557977;
}

/* Conteúdo de texto nos blocos */
#sidebar .pkp_block .content,
#sidebar .pkp_block p {
  font-size: 14px;
  line-height: 1.5;
  background-color: transparent !important;
}

/* Imagens dentro dos blocos */
#sidebar .pkp_block img {
  max-width: 100%;
  display: block;
  border-radius: 8px;
  margin-top: 15px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}


form#login div.buttons input[type="submit"],
form#login div.buttons button {
    background-color: #557977; /* cor do fundo */
    color: white; /* cor do texto */
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}



/* ===========================
   ESTILO UNIFICADO PARA BOTÕES
   (Enviar Submissão + Parecerista)
   =========================== */


/* Botão no sidebar: "Seja Parcerista" */
#sidebar .pkp_block button,
#sidebar .pkp_block a.btn-parcerista {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(135deg, #557977, #4a8d4a);
  border: none;
  color: #fff;
  border-radius: 10px;
  padding: 14px 0;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;
}

#sidebar .pkp_block button:hover,
#sidebar .pkp_block a.btn-parcerista:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  background: linear-gradient(135deg, #557977, #4a8d4a);
}

#sidebar .pkp_block button:active,
#sidebar .pkp_block a.btn-parcerista:active {
  transform: translateY(1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

/* NOVO: Botão "Enviar Submissão" (sem editar HTML) */
.pkp_block.block_make_submission .content a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(135deg, #557977, #4a8d4a);
  border: none;
  color: #fff !important;
  border-radius: 10px;
  padding: 14px 0;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;
}

.pkp_block.block_make_submission .content a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.pkp_block.block_make_submission .content a:active {
  transform: translateY(1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}



/* ===========================
        Contato
   =========================== */


.page_contact {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
  padding: 30px 15px;
  max-width: 1200px; /* mantém a largura */
  margin: 40px auto;
  border-radius: 0;       /* remove bordas arredondadas */
  box-shadow: none;       /* remove sombra */
  background: none;       /* remove fundo branco */
}

.page_contact h1 {
  font-size: 4rem;
  color: #557977;
  border-bottom: 4px solid #557977;
  padding-bottom: 10px;
  margin-bottom: 40px;
  font-weight: 700;
  text-align: center;
}

.page_contact h3 {
  font-size: 2.5rem;
  color: #557977;
  margin-bottom: 15px;
  font-weight: 600;
  border-bottom: 2px solid #557977;
  padding-bottom: 6px;
  margin-top: 40px;
  text-align: center;
}

.address {
  font-weight: 600;
  font-size: 2rem;
  margin-bottom: 30px;
  color: #131a19;
  text-align: center;
}

.map-container iframe {
  width: 100%;
  height: 350px;
  border: none;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.15);
  margin-top: 20px;
}

/* Remove efeito hover no iframe */
.map-container iframe:hover {
  transform: none;
  box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.contact {
  /*background: #eaf3e9;*/
  padding: 25px 30px;
  border-radius: 15px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.06);*/
  margin-bottom:30 px;
  text-align: center;
  font-size: 2rem;
  color: #131a19;
  transition: none; /* remove transições */
}

/* Remove efeito hover na caixa de contato */
.contact:hover {
  background-color: #eaf3e9;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.06);
  color: #131a19;
}

.contact .name,
.contact .title,
.contact .affiliation,
.contact .phone,
.contact .email {
  font-size: 2rem;
  margin-bottom: 8px;
  line-height: 1.4;
}

.phone {
  font-weight: 700;
  color: #131a19;
  cursor: default; /* cursor normal, sem pointer */
  display: inline-block;
  font-size: 2rem;
  transition: none; /* remove transições */
}

/* Remove efeito hover no telefone */
.phone:hover {
  color: #131a19;
  transform: none;
}

.contact .phone .label {
  font-size: 2rem;
  font-weight: 600;
  margin-right: 6px;
  color: #131a19;
}

.contact a {
  font-size: 2rem;
  color: #131a19 !important;
  font-weight: 600;
  text-decoration: none;
  transition: none; /* remove transições */
}

/* Remove efeito hover em links */
.contact a:hover {
  font-size: 2rem; /* mantém o tamanho igual */
  color: #131a19 !important;
  text-decoration: none;
}


/* ===========================
    seja-parecerista pagina 
   =========================== */

/*titulos */

h2 {
 font-size: 4rem;
  color: #557977;
  border-bottom: 4px solid #557977;
  padding-bottom: 10px;
  margin-bottom: 40px;
  font-weight: 700;
  text-align: center;
}
.page-header small {
  font-size: 4rem;          /* Remove o tamanho menor do small */
  font-weight: 700;         /* Deixa em negrito */
   color: #557977;          /* Mesma cor do título */
padding-bottom: 10px;
  display: inline-block;
}

.page.page_announcements h1 {
font-size: 4rem;
  color: #557977;
  padding-bottom: 10px;
  margin-bottom: 40px;
  font-weight: 700;
  text-align: center;
}

.page-header h1 {
    font-size: 4rem;
  color: #557977;
  border-bottom: 4px solid #557977;
  padding-bottom: 10px;
  margin-bottom: 40px;
  font-weight: 700;
  text-align: center;
}

.page_privacy h1 {
    font-size: 4rem;
  color: #557977;
  border-bottom: 4px solid #557977;
  padding-bottom: 10px;
  margin-bottom: 40px;
  font-weight: 700;
  text-align: center;
}



/* correção das img de Novidades */

    article.announcement-full img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 1rem auto;
        border: 1px solid #ccc; /* opcional: contorno discreto */
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* opcional: sombra leve */
    }


/* ===========================
    Rodapé
   =========================== */

  .footer {
 background-color: #f0f0f0;
  /* border-top: 1px solid #557977; */
    padding: 20px 40px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333;
    border-top: 1px solid #dad8d8;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}

.footer-block {
  flex: 1;
    padding: 8px 20px;
    border-left: 1px solid #dad8d8;
}

.footer-block:first-child {
  border-left: none;
}

.footer-block.center {
  text-align: center;
}

.footer-logo {
  max-width: 150px;
  margin-bottom: 10px;
}

.footer-logo-small {
  max-width: 80px;
  margin-top: 10px;
}

.footer-block p {
  margin: 4px 0;
  line-height: 1.3;
}



/* ===========================
  Edição atual pg PRINCIPAL
   =========================== */
   
.issue-toc img {
    border-radius: 12px;
    display: block;
    margin: 0 auto;
    max-width: 300px;
    padding: 5px; /* espaço para o gradiente */
    background: linear-gradient(45deg, #557977, #8aa9a7);
    box-shadow: 0 6px 15px rgba(85, 121, 119, 0.5);
    transition: transform 0.3s ease;
}

.issue-toc img:hover {
    transform: scale(1.05);
    cursor: pointer;
}
.current_issue_title {
    font-weight: 700;              /* Negrito para destaque */
    font-size: 1.5rem;             /* Tamanho maior para chamar atenção */
    color: #557977;                /* Mesma cor da borda para harmonia */
    text-align: center;            /* Centralizado embaixo da imagem */
    margin-top: 15px;              /* Espaço em cima */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fonte moderna e limpa */
}
p.published {
 
  font-weight: 600;
  font-size: 1.5rem;
  color: #557977;
   padding: 8px 0;
  border-radius: 6px;
  max-width: 300px;
  margin: 10px auto 0 auto;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  text-align: center;
}



/* ===========================
  REGISTRO
   =========================== */
   
   
form#register {
  max-width: 500px;
  margin: 40px auto;
  padding: 30px;
  background-color: #f7f9fc;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Legendas */
form#register legend {
  font-size: 1.6em;
  font-weight: 700;
  margin-bottom: 20px;
  color: #557977;
  border-bottom: 2px solid #557977;
  padding-bottom: 8px;
}

/* Grupos de campos */
.form-group {
  margin-bottom: 20px;
}

/* Labels */
.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: #555;
}

/* Asterisco para campo obrigatório */
.form-group label::after {
  content: " *";
  color: #e02424;
  font-weight: 700;
}

/* Inputs e select */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group select {
  width: 100%;
  padding: 12px 14px;
  border: 1.8px solid #ccc;
  border-radius: 6px;
  font-size: 1em;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="password"]:focus,
.form-group select:focus {
  outline: none;
  border-color: #557977;
  box-shadow: 0 0 8px rgba(85, 121, 119, 0.3);
}

/* Checkbox */
.form-group input[type="checkbox"] {
  margin-right: 8px;
}

/* Links dentro dos labels */
.form-group label a {
  color: #557977;
  text-decoration: none;
}

.form-group label a:hover {
  text-decoration: underline;
}

/* Container dos botões */
/* Botão Cadastrar - maior */
form#register .buttons .btn-cadastrar {
  width: 100% !important;
  padding: 14px !important;
  background-color: #4caf50 !important; /* verde principal */
  border: none !important;
  border-radius: 25px !important;
  color: white !important;
  font-size: 1.25em !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 6px rgba(76, 175, 80, 0.6) !important; /* sombra verde */
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease !important;
}

form#register .buttons .btn-cadastrar:hover {
  background-color: #557977 !important; /* verde escuro para hover */
  box-shadow: 0 6px 10px rgba(56, 142, 60, 0.8) !important;
  transform: translateY(-2px) !important;
}

/* Container do formulário */
form#register {
  max-width: 500px;
  margin: 40px auto;
  padding: 30px;
  background-color: #f7f9fc;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Botão Acesso - menor, alinhado à esquerda */
form#register .buttons .btn-acesso {
  width: 120px;
  padding: 12px 14px;
  background-color: #557977; /* verde claro */
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(129, 199, 132, 0.6);
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
  align-self: flex-start;
}

/* Botão Acesso - responsividade para telas menores */
@media (max-width: 600px) {
  form#register {
    margin: 20px;
    padding: 20px;
  }
  
  form#register .buttons .btn-acesso {
    width: 100%; /* botão "Acesso" ocupa toda a largura em telas pequenas */
    align-self: stretch;
  }
}

/* Botão Cadastrar (btn-primary) com cor verde */
.btn-primary {
  background-color: #557977; /* verde */
  border-color: #557977;
  color: white;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Estado hover, focus e active do botão Cadastrar */
.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active {
  background-color: #388e3c; /* verde escuro */
  border-color: #388e3c;
  color: white;
}



/* =================================================================================
     referencias nos artigos cor dos links e modernização do mesmo 
   =========================== ======================================================*/

.article-references-content {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #444; /* Cor padrão do texto */
  padding-left: 15px;
  margin-top: 10px;
}

.article-references-content p {
  margin-bottom: 1.2em;
  text-align: justify;
}

.article-references-content em {
  font-style: italic;
}

/* Mantém links verdes, sem sublinhado, e adiciona negrito */
.article-references-content a {
  color: #388e3c;
  text-decoration: none;
  word-wrap: break-word;  /* Quebra a palavra no final da linha se precisar */
  word-break: break-all;  /* Quebra mesmo no meio da palavra se necessário */
  hyphens: auto;          /* Hifeniza quando possível */
  overflow-wrap: break-word; /* Quebra a linha para evitar overflow */
  font-weight: bold; /* negrito */
}

.article-references-content a:hover {
  text-decoration: underline;
}

/* ORCID - links verdes */
.authors .author .orcid a {
  color: #388e3c; /* verde escuro */
  text-decoration: none;
  font-weight: bold; /* negrito */
}

.authors .author .orcid a:hover {
  text-decoration: underline;
}

/* Ajuste para painel com texto em cor padrão e sem verde */
.panel-body {
  color: #444; /* cor padrão do texto */
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 5px;
  font-size: 14px;
  margin-bottom: 15px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Lista de artigos similares: links verdes */
#articlesBySimilarityList a {
  color: #388e3c;
  text-decoration: none; /* opcional, remove o sublinhado */
}

#articlesBySimilarityList a:hover {
  text-decoration: underline; /* opcional, adiciona sublinhado ao passar o mouse */
}

/* Breadcrumbs: links verdes */
.cmp_breadcrumbs a {
  color: #388e3c; /* verde */
  text-decoration: none; /* remove sublinhado */
}

.cmp_breadcrumbs a:hover {
  text-decoration: underline; /* sublinhado ao passar o mouse */
}

.panel-body a {
  color: #388e3c; /* Verde escuro */
  text-decoration: none;
}

.panel-body a:hover {
  text-decoration: underline;
}
/* Aplica o estilo só nos links dentro de #main-content, excluindo os botões */
#main-content p a {
  color: #388e3c !important; /* verde */
  font-weight: bold !important; /* negrito */
  text-decoration: none;
}

#main-content p a:hover {
  text-decoration: underline;
}

/* Se o botão estiver dentro de um container específico, exclua ele */
#main-content .btn a {
  color: initial !important;
  font-weight: normal !important;
}
small.date {
  font-size: 16px; /* tamanho menor para a data */
}

small.date .glyphicon {
  font-size: 16px; /* tamanho menor para o ícone */
}
a {
  color: green;
  font-weight: bold;
}