/* Base: pouco invasiva, mas deixa tudo mais consistente */
:root{
  --radius: 10px;
  --shadow: 2px 2px 10px rgba(0,0,0,.12);
}

html, body{
  margin: 0;
  padding: 0;
}

body{
  background: var(--c2);
  color: var(--t2);
}

/* Links mais previsíveis */
a{ text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Imagens sempre responsivas (regra geral)
   Obs: topo específico é tratado no app-pages.css */
img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* Inputs padrão */
input, select, textarea{ box-sizing: border-box; }

/* Quebra de textos/links longos (DOI/ORCID etc.)
   Evite aplicar em td global para não “deformar” a tabela-moldura */
#conteudo, .box,
#conteudo td, .box td{
  overflow-wrap: anywhere;
  word-break: break-word;
}

#conteudo, .box, .rodape-card,
#conteudo td, .box td, .rodape-card td{
  overflow-wrap: anywhere;
  word-break: break-word;
}



/* Estrutura geral do layout */
table{
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  border-collapse: collapse;
  table-layout: fixed; /* importante */
}

/* Colunas fixas (padrão do layout) */
.col-impar{ width: 4px; }
.col-2{ width: 212px; }
.col-4{ width: 800px; }

/* Caixa para páginas AJAX */
.box{
  max-width: 800px; /* combina com col-4 */
  margin: 0 auto;
  padding: 8px;
}