/* ==============================
   Layout principal (a tabela do index)
   ============================== */

/* ===========================
   TOPO PADRÃO DO PORTAL
   =========================== */
:root{ --h-topo: 160px; }

/* Container do topo */
.topo-img{
  height: var(--h-topo);
  overflow: hidden;
  background: var(--c1);  /* fundo do site aparece atrás do logo transparente */
}

/* Base para imagens do topo */
.topo-img img{
  width: 100%;
  height: 100%;
  display: block;
}

/* Logo: encaixa sem cortar e sem distorcer */
.topo-logo img{
  object-fit: contain;
  padding: 0;
}

/* Banner: encaixa sem cortar e sem distorcer */
.topo-banner img{
  object-fit: contain;
}






/* ==============================
   Tabela principal do layout (index)
   ============================== */

body > table{
  width: 100%;
  max-width: 1024px;              /* (se você quiser manter seu total 1024) */
  margin: 0 auto;
  border-collapse: collapse;
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--c1);
  color: var(--t1);
  box-shadow: var(--shadow);
}

/* Base neutra para td do layout (sem forçar alinhamento) */
body > table td{
  border: none;
  vertical-align: middle;   
}

/* Bordas/colunas “estruturais” podem ficar centralizadas */
body > table td.col-impar{
  text-align: center;
  vertical-align: middle;
}

/* Coluna do MENU (col-2) centraliza botões e imagens do menu */
body > table td.col-2{
  text-align: center;
  vertical-align: middle;
}

/* Coluna do CONTEÚDO (col-4) fica livre */
body > table td.col-4{
  vertical-align: middle;
}



/* ==============================
   Classes do index (larguras e cores)
   ============================== */

.col-impar { width: 4px; background-color: var(--c1); }
.col-2     { width: 212px; }
.col-4     { width: 800px; }

.linha-impar { height: 5px; background-color: var(--c1); }
.linha-par   { background-color: var(--c2); }

.texto-especial     { color: var(--t1); }
.texto-especial-alt { color: var(--t2); }



/* ==============================
   Botões do menu (classe .botao)
   ============================== */

.botao{
  display: inline-block;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  border: 3px solid var(--c1);
  background-color: var(--c2);
  color: var(--t2);
  border-radius: 30px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.15);
  text-decoration: none;
}
.botao:hover{
  background-color: var(--c1);
  color: var(--t1);
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.22);
  transform: scale(1.03);
}



/* ==============================
   Conteúdo AJAX (div #conteudo)
   ============================== */

#conteudo{
  background-color: var(--c2);
  color: var(--t2);
  padding: 8px;
  margin: 4px auto;
  border-radius: 8px;
  box-shadow: var(--shadow);
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  max-width: 800px;
  min-height: 100px;
}

/* Efeito hover opcional (se achar “demais”, pode remover) */
#conteudo:hover{
  transform: scale(1.005);
}

/* Dentro do conteúdo, volte a permitir leitura “normal” em páginas longas (DOI etc.) */
#conteudo p,
#conteudo div,
#conteudo table{
  text-align: initial;
}



/* ==============================
   Formbox (login/cadastro etc.)
   ============================== */

.formbox{
  max-width: 360px;
  background: #fff;
  padding: 18px;
  border-radius: 10px;
  box-shadow: var(--shadow);
  text-align: center;
  margin: auto;
}
.formbox h2{
  color: #333;
  font-size: 13px;
}
.formbox form{
  display: flex;
  flex-direction: column;
}
.formbox label{
  text-align: left;
  font-weight: bold;
  margin-top: 10px;
}
.formbox input, .formbox select{
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.formbox button{
  background: var(--c1);
  color: var(--t1);
  border: none;
  padding: 10px;
  margin-top: 15px;
  cursor: pointer;
  border-radius: 8px;
  transition: .2s;
}
.formbox button:hover{
  filter: brightness(1.08);
}
.toggle-link{
  margin-top: 15px;
  color: #0b57d0;
  cursor: pointer;
}
.toggle-link:hover{
  text-decoration: underline;
}



/* ==============================
   V2.0: melhorias específicas
   (busca / DOI / imagens)
   ============================== */

/* Botões dentro de tabelas de resultado (Buscar Produção) */
#conteudo table button{
  padding: 4px 6px;
  border-radius: 8px;
  border: 1px solid var(--c1);
  background: #fff;
  cursor: pointer;
}
#conteudo table button:hover{
  background: var(--c1);
  color: var(--t1);
}

/* DOI: deixa a capa mais “responsiva” */
#conteudo img{
  max-width: 100%;
  height: auto;
}

.texto-esquerda{
  text-align: left;
}
.texto-justificado{
  text-align: justify;
  text-indent: 5%;
}
.topo-img{ background: transparent; }

/* ==============================
   Rodapé (estilo do #conteudo, sem mexer no AJAX)
   ============================== */

.rodape-card{
  background-color: var(--c2);
  color: var(--t2);
  padding: 8px;
  margin: 4px auto;
  border-radius: 8px;
  box-shadow: var(--shadow);
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  max-width: 1016px;     /* rodapé é maior que o conteudo */
}

/* Hover igual ao #conteudo (opcional) */
.rodape-card:hover{
  transform: scale(1.005);
}

/* Dentro do rodapé, leitura normal */
.rodape-card p,
.rodape-card div,
.rodape-card table{
  text-align: initial;
}

/* Imagens no rodapé também responsivas (igual ao #conteudo img) */
.rodape-card img{
  max-width: 100%;
  height: auto;
}

table.rodape-card{
  border-radius: 8px;
  overflow: hidden;          /* faz o arredondado aparecer mesmo com td colorido */
  border-collapse: separate; /* essencial para radius em table */
  border-spacing: 0;

  box-shadow: var(--shadow);
  transition: transform 160ms ease, box-shadow 160ms ease;
  transform-origin: center;
}

table.rodape-card:hover{
  transform: scale(1.005);
}
table.redes-grid{
  background: var(--c1);

  border-radius: 10px;
  overflow: hidden;

  border-collapse: separate;
  border-spacing: 3px; /* substitui o cellspacing */

  transition: transform 160ms ease;
}

table.redes-grid:hover{
  transform: scale(1.005);
}
/* bloco inteiro com o mesmo “vão” do border-spacing (3px) */
.redes-area{
  background: var(--c1);
  border-radius: 10px;
  overflow: hidden;

  padding: 3px;                /* <-- casa com border-spacing: 3px */
  transition: transform 160ms ease;
}
.redes-area:hover{
  transform: scale(1.005);
}

/* neutraliza SÓ aqui, sem afetar outros usos de table.redes-grid */
.redes-area > table.redes-grid{
  background: transparent;
  border-radius: 0;
  overflow: visible;
  transition: none;
}
.redes-area > table.redes-grid:hover{
  transform: none;
}

.tbl-autoria{
  width: 750px;          /* ou 100% se quiser responsivo */
  table-layout: fixed;   /* ESSENCIAL: respeita colunas */
  border-collapse: separate;
  border-spacing: 2px;   /* equivalente ao cellspacing="2" */
}

.tbl-autoria td{
  overflow-wrap: anywhere;  /* quebra links longos */
  word-break: break-word;
  vertical-align: middle;
}
.tbl-autoria td:nth-child(3),
.tbl-autoria td:nth-child(4){
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tbl-autoria td:nth-child(3) a,
.tbl-autoria td:nth-child(4) a{
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}