/* RGES — Hoja de estilos v6 para OJS 3.0.x */
/* Subir en: Configuración > Sitio web > Apariencia > Plantilla de la revista */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600&display=swap');

:root {
  --rges-verde-oscuro: #0F4A3C;
  --rges-verde-medio:  #0F6E56;
  --rges-verde-lima:   #8DC63F;
  --rges-blanco:       #FFFFFF;
  --rges-gris-texto:   #2C2C2A;
}

/* ══════════════════════════════════════════════
   LOGO
   ══════════════════════════════════════════════ */
.pkp_site_name .is_img img,
.pkp_site_name img,
h1.pkp_site_name img {
  max-height: 120px !important;
  height: 120px !important;
  width: auto !important;
  display: block !important;
}

.pkp_site_name_wrapper {
  background-color: var(--rges-verde-oscuro) !important;
  padding: 16px 24px !important;
}

.pkp_site_name,
h1.pkp_site_name {
  background-color: var(--rges-verde-oscuro) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ══════════════════════════════════════════════
   USUARIO
   ══════════════════════════════════════════════ */
#navigationUserWrapper,
.pkp_navigation_user_wrapper {
  background-color: var(--rges-verde-oscuro) !important;
  padding: 6px 24px !important;
}

.pkp_navigation_user_wrapper a,
#navigationUserWrapper a,
#navigationUser a {
  color: var(--rges-blanco) !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 14px !important;
}

.task_count {
  background-color: var(--rges-verde-lima) !important;
  color: var(--rges-verde-oscuro) !important;
  border-radius: 50% !important;
  width: 18px !important;
  height: 18px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 4px !important;
}

/* ══════════════════════════════════════════════
   HEADER Y NAV
   ══════════════════════════════════════════════ */
.pkp_head_wrapper,
.masthead,
.pkp_structure_head,
#pkp_nav_tab_wrapper,
#headerNavigationContainer {
  background-color: var(--rges-verde-oscuro) !important;
  padding: 0 !important;
  margin: 0 !important;
}

nav#navigationPrimary,
.pkp_navigation_primary_row,
nav.pkp_nav_list,
.pkp_site_nav_menu {
  background-color: var(--rges-verde-oscuro) !important;
  border-bottom: 3px solid var(--rges-verde-lima) !important;
  border-top: none !important;
  margin: 0 !important;
  padding: 0 24px !important;
}

nav#navigationPrimary a,
.pkp_navigation_primary_row a,
nav.pkp_nav_list a,
.pkp_site_nav_menu a {
  color: var(--rges-blanco) !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 14px !important;
  padding: 12px 14px !important;
}

nav#navigationPrimary a:hover,
nav.pkp_nav_list a:hover {
  color: var(--rges-verde-lima) !important;
  text-decoration: none !important;
  background-color: transparent !important;
}

/* ══════════════════════════════════════════════
   FIX FRANJAS GRISES — selectores exactos
   del inspector
   ══════════════════════════════════════════════ */

/* Body y página principal */
body,
body.pkp_page_index,
body.pkp_op_index,
.pkp_structure_page {
  background-color: var(--rges-blanco) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Franja gris del footer — selector exacto del inspector */
#pkp_content_footer,
.pkp_structure_footer_wrapper,
div.pkp_structure_footer_wrapper {
  background-color: var(--rges-verde-oscuro) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Contenido principal */
.pkp_structure_content,
div.pkp_structure_content,
.pkp_structure_content.has_sidebar {
  background-color: var(--rges-blanco) !important;
  padding: 0 !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Columnas — padding correcto a ambos lados */
.pkp_columns,
.pkp_structure_content .pkp_columns {
  padding: 32px 40px !important;
  margin: 0 auto !important;
  max-width: 1200px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* ══════════════════════════════════════════════
   TIPOGRAFÍA
   ══════════════════════════════════════════════ */
body, p, li, td {
  font-family: 'Source Sans 3', sans-serif !important;
  color: var(--rges-gris-texto) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

h1, h2, h3, h4 {
  font-family: Georgia, serif !important;
  color: var(--rges-verde-oscuro) !important;
}

a { color: var(--rges-verde-medio) !important; }
a:hover { color: var(--rges-verde-oscuro) !important; }

/* ══════════════════════════════════════════════
   BOTONES
   ══════════════════════════════════════════════ */
.pkp_button_primary,
.btn-primary,
input[type="submit"] {
  background-color: var(--rges-verde-medio) !important;
  border-color: var(--rges-verde-medio) !important;
  color: var(--rges-blanco) !important;
  border-radius: 4px !important;
}

/* ══════════════════════════════════════════════
   PIE DE PÁGINA — ancho completo
   ══════════════════════════════════════════════ */
.pkp_footer,
footer,
.pkp_structure_footer {
  background-color: var(--rges-verde-oscuro) !important;
  color: var(--rges-blanco) !important;
  border-top: 3px solid var(--rges-verde-lima) !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 24px 40px !important;
  box-sizing: border-box !important;
}

.pkp_footer a, footer a {
  color: var(--rges-verde-lima) !important;
}
.pkp_footer p, footer p,
.pkp_footer span, footer span {
  color: var(--rges-blanco) !important;
}