/* ============================================================
PENSAMIENTO HUMANISTA — CSS AJUSTADO FINAL
============================================================ */

/* IMPORT TIPOGRAFÍAS */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;600;700&family=DM+Sans:wght@300;400;500;700&display=swap');

/* VARIABLES */
:root {
  --ph-crema: #F0EBE0;
  --ph-crema-oscuro: #E4DBCC;
  --ph-arena: #C9A882;
  --ph-arena-claro: #D9C4A8;
  --ph-azul-acero: #5B7FA6;
  --ph-azul-marino: #1E3A5F;
  --ph-marron: #7A4E2D;
  --ph-vino: #7A1F2E;
  --ph-negro: #111111;
  --ph-blanco: #FDFAF6;

  --font-display: 'Josefin Sans', sans-serif;
  --font-body: 'DM Sans', sans-serif;
}

/* ============================================================
TIPOGRAFÍA BASE
============================================================ */
html {
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background-color: var(--ph-crema);
  color: var(--ph-azul-marino);
  font-size: 1rem;
  line-height: 1.7;
}

/* HEADINGS */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.3rem; }

/* ============================================================
HEADER (VINO) — OJS Bootstrap 3
Selectores confirmados de OJS Bootstrap 3 en producción:
.main-header  → wrapper del logo + barra de búsqueda
.navbar-default → barra de navegación inferior
============================================================ */

/* Wrapper principal del header (logo + buscar + registrarse) */
.main-header,
.pkp_structure_head,
.pkp_structure_head .container,
.pkp_structure_head .container-fluid,
.pkp_structure_head .row {
  background-color: #7A1F2E !important;
  background-image: none !important;
}

/* Navbar Bootstrap (menú de navegación) */
.navbar-default,
.top-nav .navbar-default,
.pkp_navigation_primary_row .navbar-default,
.pkp_navigation_primary_row {
  background-color: #7A1F2E !important;
  background-image: none !important;
  border-color: #1E3A5F !important;
  border-bottom: 3px solid #1E3A5F !important;
  box-shadow: none !important;
}

/* Borde inferior del head completo */
.main-header {
  border-bottom: 3px solid #1E3A5F !important;
}

/* Nombre de la revista */
.main-header .navbar-brand,
.navbar-default .navbar-brand,
.pkp_structure_head .pkp_site_name,
.pkp_structure_head .pkp_site_name a,
.pkp_structure_head h1 {
  color: #F0EBE0 !important;
  font-family: var(--font-display);
}

/* Links de navegación (Actual, Archivos, Envíos...) */
.navbar-default .navbar-nav > li > a,
.top-nav .navbar-nav > li > a {
  color: #F0EBE0 !important;
  font-family: var(--font-display);
}
.navbar-default .navbar-nav > li > a:hover,
.top-nav .navbar-nav > li > a:hover {
  color: #C9A882 !important;
  background-color: rgba(0,0,0,0.15) !important;
}

/* Links "Registrarse / Entrar" */
.navbar-default .navbar-nav.navbar-right > li > a,
.main-header .navbar-nav > li > a {
  color: #F0EBE0 !important;
}

/* Subtítulo / tagline */
.main-header .tagline,
.pkp_structure_head .tagline,
.pkp_structure_head .description {
  color: #C9A882 !important;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 10px;
}

/* Logo */
.main-header img,
.pkp_structure_head img {
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

/* Barra de búsqueda */
.main-header .form-control,
.main-header input[type="text"],
.main-header input[type="search"] {
  background-color: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.3) !important;
  color: #F0EBE0 !important;
}
.main-header .form-control::placeholder {
  color: rgba(240,235,224,0.55);
}

/* ============================================================
NAVBAR CLARO
============================================================ */
.navbar-nav > li > a {
  color: var(--ph-azul-marino) !important;
  font-family: var(--font-display);
}

.navbar-nav > li > a:hover {
  color: var(--ph-vino) !important;
}


.navbar,
.pkp_navigation_primary_row,
.pkp_site_nav_menu {
  border-bottom: 2px solid #000;
}


/* ============================================================
LAYOUT — SIDEBAR DERECHA
============================================================ */
.pkp_structure_content {
  display: flex;
  gap: 40px;
}

.pkp_structure_main {
  width: 68%;
}

.pkp_structure_sidebar {
  width: 40%;
  float: none !important;
}

/* ============================================================
SIDEBAR ESTILO EDITORIAL
============================================================ */
.pkp_structure_sidebar {
  border-left: 1px solid var(--ph-crema-oscuro);
  padding-left: 20px;
  position: sticky;
  top: 20px;
}

.pkp_block {
  background: var(--ph-blanco);
  border: 1px solid var(--ph-crema-oscuro);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.pkp_block:hover {
  transform: translateY(-2px);
}

/* ============================================================
TEXTO — NORMALIZACIÓN
============================================================ */
p,
li,
a,
td,
th,
label,
input,
textarea {
  font-size: 1rem;
}

/* ============================================================
BOTONES — AZUL MARINO
============================================================ */

.btn,
.btn-primary,
button,
input[type="submit"],
.pkp_button,
.pkp_galley_link {
  background-color: var(--ph-azul-marino) !important;
  border-color: var(--ph-azul-marino) !important;
  color: var(--ph-crema) !important;
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.btn:hover,
.btn-primary:hover,
button:hover,
input[type="submit"]:hover,
.pkp_button:hover,
.pkp_galley_link:hover {
  background-color: var(--ph-vino) !important;
  border-color: var(--ph-vino) !important;
  color: var(--ph-crema) !important;
}

/* ============================================================
TABLAS
============================================================ */
.table {
  font-size: 1rem;
}

.table th {
  background-color: var(--ph-azul-marino);
  color: var(--ph-crema);
}

/* ============================================================
FOOTER — línea divisoria vino
============================================================ */
footer,
.pkp_structure_footer {
  background-color: var(--ph-azul-marino);
  color: var(--ph-crema);
  font-size: 1rem;
  border-top: 4px solid var(--ph-vino);
  padding: 40px 0 0;
}

.pkp_structure_footer a {
  color: var(--ph-arena);
}
.pkp_structure_footer a:hover {
  color: var(--ph-crema);
}

/* ============================================================
LOGO MEJORA VISUAL
============================================================ */
.pkp_structure_head img {
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 768px) {
  .pkp_structure_content {
    flex-direction: column;
  }

  .pkp_structure_main,
  .pkp_structure_sidebar {
    width: 100%;
  }

  .pkp_structure_sidebar {
    border-left: none;
    padding-left: 0;
    position: relative;
  }
}

/* =========================
FORZAR LÍNEA NAVBAR
========================= */
.navbar,
.pkp_navigation_primary_row,
.pkp_site_nav_menu {
  border-bottom: 2px solid #000 !important;
}

/* =========================
LAYOUT CORREGIDO
========================= */
.pkp_structure_main {
  width: 68% !important;
}

.pkp_structure_sidebar {
  width: 32% !important;
}
/* ============================================================
PÁGINA ARTÍCULO — REORDENAR COLUMNA CENTRAL
Objetivo: título → autores → resumen → palabras clave → resto
Sin modificar barras laterales.
OJS 3 renderiza el artículo dentro de .article-details
con la portada+metadatos a la izquierda (.article-details-block)
y el contenido a la derecha (.article-main-block o similar).
============================================================ */

/* Subcontenedor del cuerpo del artículo como columna flex */
.article-details-block,
.pkp_page_article .article-main,
.pkp_page_article .obj_article_details {
  display: flex;
  flex-direction: column;
}

/* TÍTULO — queda primero */
.pkp_page_article h1.page_title,
.pkp_page_article .article-header {
  order: 1;
}

/* AUTORES — sube al 2 */
.pkp_page_article .authors,
.pkp_page_article .obj_article_details .authors {
  order: 2;
  margin-bottom: 1rem;
}

/* RESUMEN — sube al 3 */
.pkp_page_article section.abstract,
.pkp_page_article .article-abstract {
  order: 3;
  margin-bottom: 1rem;
}

/* PALABRAS CLAVE — sube al 4 */
.pkp_page_article section.keywords,
.pkp_page_article .article-keywords {
  order: 4;
  margin-bottom: 1.5rem;
}

/* TODO LO DEMÁS — referencias, cuerpo, galeradas — queda abajo */
.pkp_page_article .article-full-text,
.pkp_page_article .article-references,
.pkp_page_article section:not(.abstract):not(.keywords),
.pkp_page_article .pkp_block {
  order: 5;
}