/* ==========================================================
   HITOS SCIENTIA · HOJA DE ESTILOS OJS 3.5
   Tema base: Default Manuscript
   Versión: REDISEÑO UI 2026
   ----------------------------------------------------------
   Mejoras frente a la versión anterior:
   - Banner FULL-WIDTH real, crujiente y robusto, SOBRE el menú.
   - Sistema de color con contraste WCAG AA/AAA verificado,
     incluyendo color de TEXTO BASE (antes lo heredaba del tema).
   - Tipografía editorial: Spectral (títulos) + IBM Plex Sans (cuerpo).
   - Responsive más fluido (desktop / tablet / móvil / móvil pequeño).
   - Pulido de UI: tarjetas de artículo, paginación, pills de
     palabras clave, tablas, formularios y footer.
   - Foco visible (teclado), reduce-motion e impresión.
   - Portable: sin referencias a dominio.
   ========================================================== */

/* ----------------------------------------------------------
   0. FUENTES
   ---------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Spectral:ital,wght@0,500;0,600;0,700;1,500&display=swap');

/* ----------------------------------------------------------
   1. VARIABLES DE MARCA Y SISTEMA
   ---------------------------------------------------------- */
:root {
  /* Paleta morada (contrastes sobre BLANCO verificados) */
  --purple-900: #2a1342;   /* títulos/texto fuerte   ~14:1 AAA  */
  --purple-700: #5a2d82;   /* marca primaria         ~9.8:1 AAA */
  --purple-600: #6a3d92;   /* hover de marca         ~7.4:1 AAA */
  --purple-500: #7a52a3;   /* acento / decorativo    ~5.9:1 AA  */
  --purple-100: #efe9f5;   /* tintes de fondo                   */
  --purple-050: #f7f4fb;   /* fondo muy sutil                   */

  /* Tinta y neutros (contraste sobre blanco) */
  --ink:        #211a2e;   /* TEXTO BASE             ~14:1 AAA  */
  --ink-soft:   #4a4458;   /* texto secundario       ~9.3:1 AAA */
  --ink-muted:  #6b6478;   /* metadatos / captions   ~5.4:1 AA  */

  --on-purple:  #ffffff;   /* texto/iconos sobre morado         */
  --surface:    #ffffff;
  --surface-alt:#f7f6f9;   /* fondo de sección                  */
  --border:     #e4e0ec;   /* bordes suaves                     */
  --border-strong:#cbc4d8;

  /* Estados */
  --focus-ring: #ffb800;   /* amarillo: alto contraste universal */
  --link:       #5a2d82;
  --link-hover: #7a52a3;
  --link-visited:#6a3d92;

  /* Métricas */
  --header-bar-height: 40px;
  --nav-height:        62px;
  --container-max:     1180px;
  --radius:            10px;
  --radius-sm:         6px;
  --shadow-sm: 0 1px 3px rgba(42, 19, 66, 0.08);
  --shadow-md: 0 8px 24px rgba(42, 19, 66, 0.12);
  --shadow-nav:0 2px 10px rgba(42, 19, 66, 0.10);
  --ease: 0.22s cubic-bezier(0.4, 0, 0.2, 1);

  /* Tipografía */
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading: "Spectral", Georgia, "Times New Roman", serif;
}

/* Caja predecible en todo el sitio */
*, *::before, *::after { box-sizing: border-box; }

/* ----------------------------------------------------------
   1.B FUNDAMENTOS RESPONSIVE GLOBALES
   ---------------------------------------------------------- */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

body {
  font-family: var(--font-body) !important;
  color: var(--ink) !important;          /* <-- texto base, antes faltaba */
  background-color: var(--surface) !important;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Hereda la tinta base en el contenido para evitar grises del tema */
.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_content p,
.pkp_structure_content li {
  color: var(--ink) !important;
}

img { max-width: 100% !important; height: auto; }
iframe { max-width: 100%; }

/* Tap targets táctiles (Apple/Google ≥ 44px) */
button, .button, a.button, .pkp_button,
.galleys_links a, .obj_galley_link {
  min-height: 44px;
  min-width: 44px;
}

/* ==========================================================
   2. ESTRUCTURA DE LA CABECERA
   Orden visual: [barra usuario 40px] → [BANNER full-width] → [menú]
   ========================================================== */
header.pkp_structure_head {
  background-color: var(--purple-900) !important;       /* mismo tono que la barra de usuario */
  padding: 0 !important;                                 /* la reserva la hace el banner (sec. 4) */
  border: none !important;
  display: block !important;
  width: 100% !important;
  position: relative !important;
  margin: 0 !important;
}

header.pkp_structure_head::before,
header.pkp_structure_head::after {
  background-color: var(--purple-700) !important;
  display: block !important;
}

.pkp_navigation_primary_wrapper::before,
.pkp_navigation_primary_wrapper::after {
  background-color: var(--surface) !important;
  display: block !important;
}

/* ==========================================================
   3. BARRA SUPERIOR DE USUARIO (LOGIN, IDIOMAS)
   Desktop: fija arriba, 40px, fondo morado. Móvil: en flujo (sec. 13).
   ========================================================== */
.pkp_navigation_user_wrapper {
  background-color: var(--purple-900) !important;   /* tono más profundo: separa del banner */
  width: 100% !important;
  display: block !important;
  position: absolute !important;        /* FIJADA ARRIBA, encima de la imagen */
  top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 30 !important;
  height: var(--header-bar-height) !important;
}

.pkp_navigation_user {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  height: var(--header-bar-height) !important;
  list-style: none !important;
  gap: 2px;
}

.pkp_navigation_user > li {
  display: inline-flex !important;
  align-items: center !important;
  height: 100% !important;
}

.pkp_navigation_user > li > a {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px;
  padding: 0 12px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  height: 100% !important;
  background: transparent !important;
  transition: background-color var(--ease), color var(--ease);
}

.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
  color: var(--on-purple) !important;
  background-color: rgba(255, 255, 255, 0.14) !important;
  text-decoration: none !important;
}

/* --- Banderas de idioma --- */
.pkp_navigation_user > li > a[href*="setLocale"],
.pkp_navigation_user > li > a[href*="locale="] {
  font-size: 0 !important;
  color: transparent !important;
  width: 40px !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
}

.pkp_navigation_user > li > a[href*="setLocale"]::before,
.pkp_navigation_user > li > a[href*="locale="]::before {
  position: absolute !important;
  left: 50% !important; top: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 20px !important;
  color: initial !important;
  visibility: visible !important;
  line-height: 1 !important;
}

.pkp_navigation_user > li > a[href*="es_ES"]::before,
.pkp_navigation_user > li > a[href*="/es"]::before { content: "🇪🇨" !important; }

.pkp_navigation_user > li > a[href*="en_US"]::before,
.pkp_navigation_user > li > a[href*="/en"]::before { content: "🇺🇸" !important; }

.pkp_navigation_user
  > li > a:not([href*="setLocale"]):not([href*="locale="])::before {
  content: none !important;
}

/* ==========================================================
   4. BANNER (FULL-WIDTH SOBRE FONDO MORADO, ENCIMA DEL MENÚ)
   La imagen ocupa todo el ancho del viewport, por encima del
   menú de opciones. Imagen recomendada: 2400 × 560 px (≈4.3:1)
   para que se vea nítida en pantallas grandes y retina.
   ========================================================== */
.pkp_head_wrapper {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  background-color: var(--purple-700) !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

/* Anula cualquier contenedor intermedio del tema con max-width/padding */
.pkp_head_wrapper > .pkp_container {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* El banner y TODOS sus contenedores: ancho completo, SIN relleno lateral.
   El contenedor EXTERNO reserva arriba la franja de la barra de usuario
   (que va en position:absolute) y la pinta del mismo morado oscuro, así
   la imagen queda SIEMPRE completa debajo, nunca tapada por la barra. */
.pkp_site_name_wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: var(--header-bar-height) 0 0 0 !important;   /* reserva SOLO arriba */
  display: block !important;
  text-align: center;
  background: var(--purple-900) !important;             /* franja superior = color de la barra */
  border: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

.pkp_site_name_wrapper .pkp_site_name,
.pkp_head_wrapper .pkp_site_name {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  text-align: center;
  background: transparent !important;
  border: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
  line-height: 0 !important;            /* elimina el hueco arriba/abajo */
}

.pkp_site_name_wrapper .is_img,
.pkp_site_name_wrapper > a,
.pkp_site_name a.is_img {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  text-decoration: none !important;
}

/* La imagen llena el ancho COMPLETO, borde a borde */
.pkp_head_wrapper .pkp_site_name_wrapper img,
.pkp_site_name_wrapper .is_img img,
.pkp_site_name_wrapper > a img,
.pkp_site_name_wrapper img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background-color: transparent !important;
}

/* Fallback de TEXTO (solo si NO hay imagen): mantiene la reserva superior */
.pkp_site_name_wrapper:not(:has(img)),
.pkp_site_name:not(:has(img)) {
  background: var(--purple-700) !important;
  line-height: 1.2 !important;
  padding: calc(var(--header-bar-height) + 22px) 16px 26px !important;
}
.pkp_site_name:not(:has(img)),
.pkp_site_name:not(:has(img)) a {
  color: var(--on-purple) !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  font-size: clamp(1.6rem, 4vw, 2.6rem) !important;
  letter-spacing: 0.5px;
  text-decoration: none !important;
}

/* ==========================================================
   5. MENÚ PRIMARIO Y BUSCADOR (UNA SOLA FILA EN ESCRITORIO)
   ========================================================== */
.pkp_navigation_primary_wrapper {
  background-color: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 3px solid var(--purple-700) !important;
  position: sticky !important;
  position: -webkit-sticky !important;
  top: 0;
  z-index: 9998 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: var(--nav-height) !important;
  box-shadow: var(--shadow-nav);
  margin: 0 !important;
}

.pkp_navigation_primary_wrapper > .pkp_container,
.pkp_navigation_primary_row {
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: var(--nav-height) !important;
}

.pkp_navigation_primary {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-grow: 1 !important;
}

.pkp_navigation_primary > li {
  display: inline-flex !important;
  align-items: center !important;
  height: 100% !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

.pkp_navigation_primary > li > a {
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  font-size: 12.5px !important;
  letter-spacing: 0.6px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: color var(--ease), background-color var(--ease),
              border-color var(--ease);
  white-space: nowrap !important;
  height: var(--nav-height) !important;
  text-decoration: none !important;
  border-bottom: 3px solid transparent !important;
  margin-bottom: -3px !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li.current > a {
  color: var(--purple-700) !important;
  background-color: var(--purple-050) !important;
  border-bottom-color: var(--purple-700) !important;
}

/* ----- BUSCADOR (alineado a la derecha) ----- */
.pkp_navigation_search_wrapper {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin: 0 0 0 auto !important;
  padding: 0 0 0 16px !important;
  height: var(--nav-height) !important;
  width: auto !important;
  flex-shrink: 0 !important;
}

.pkp_navigation_search_wrapper .pkp_search,
.pkp_navigation_search_wrapper form {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  flex-direction: row !important;
}

/* ==========================================================
   6. SUBMENÚS / DROPDOWNS
   ========================================================== */
.pkp_navigation_primary > li > ul,
.pkp_navigation_user > li > ul {
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-top: 3px solid var(--purple-700) !important;
  box-shadow: var(--shadow-md) !important;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important;
  min-width: 230px !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  list-style: none !important;
  overflow: hidden;
}

.pkp_navigation_primary ul li a,
.pkp_navigation_user ul li a {
  color: var(--ink) !important;
  background: var(--surface) !important;
  padding: 11px 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-bottom: none !important;
  border-left: 3px solid transparent !important;
  display: block !important;
  text-indent: 0 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background-color var(--ease), color var(--ease),
              padding var(--ease);
}

.pkp_navigation_primary ul li a::before,
.pkp_navigation_user ul li a::before { display: none !important; }

.pkp_navigation_primary ul li a:hover,
.pkp_navigation_primary ul li a:focus,
.pkp_navigation_user ul li a:hover,
.pkp_navigation_user ul li a:focus {
  background-color: var(--purple-050) !important;
  color: var(--purple-700) !important;
  padding-left: 26px !important;
  border-left-color: var(--purple-700) !important;
}

/* ==========================================================
   7. BOTONES (CONTRASTE E ICONOS)
   Regla: icono sobre morado = blanco; sobre claro = morado/oscuro.
   ========================================================== */
button, .button, a.button, .pkp_button,
input[type="submit"], input[type="button"] {
  background-color: var(--purple-700) !important;
  color: var(--on-purple) !important;
  border: 2px solid var(--purple-700) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 9px 18px !important;
  cursor: pointer !important;
  transition: background-color var(--ease), border-color var(--ease),
              transform var(--ease), box-shadow var(--ease);
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

button:hover, .button:hover, a.button:hover, .pkp_button:hover,
input[type="submit"]:hover, input[type="button"]:hover {
  background-color: var(--purple-600) !important;
  border-color: var(--purple-600) !important;
  color: var(--on-purple) !important;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

button:active, .button:active, .pkp_button:active { transform: translateY(0); }

button:disabled, .pkp_button:disabled {
  background-color: var(--border-strong) !important;
  border-color: var(--border-strong) !important;
  color: var(--surface) !important;
  cursor: not-allowed !important;
  opacity: 0.7;
  transform: none !important;
  box-shadow: none !important;
}

/* Iconos dentro de elementos morados: blancos */
button .fa, button [class^="fa-"], button [class*=" fa-"], button svg,
.pkp_button .fa, .pkp_button svg, .button .fa, .button svg,
a.button .fa, a.button svg,
.pkp_navigation_user .fa, .pkp_navigation_user svg,
.pkp_navigation_user_wrapper .fa, .pkp_navigation_user_wrapper svg {
  color: var(--on-purple) !important;
  fill: var(--on-purple) !important;
}

/* --- Buscador: input blanco + botón morado --- */
.pkp_navigation_search_wrapper input[type="search"],
.pkp_navigation_search_wrapper input[type="text"],
.pkp_search input[type="search"],
.pkp_search input[type="text"] {
  color: var(--ink) !important;
  background-color: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-right: none !important;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
  padding: 8px 14px !important;
  height: 40px !important;
  font-size: 14px !important;
  font-family: var(--font-body) !important;
  min-width: 190px;
}

.pkp_search input::placeholder { color: var(--ink-muted) !important; opacity: 1 !important; }

.pkp_navigation_search_wrapper input:focus,
.pkp_search input:focus {
  border-color: var(--purple-700) !important;
  box-shadow: 0 0 0 3px var(--purple-100);
  outline: none !important;
}

.pkp_navigation_search_wrapper button,
.pkp_search button, .pkp_search .search_icon, .pkp_search [type="submit"] {
  background-color: var(--purple-700) !important;
  color: var(--on-purple) !important;
  border: 1px solid var(--purple-700) !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  height: 40px !important;
  padding: 0 16px !important;
  margin: 0 !important;
}

.pkp_navigation_search_wrapper button:hover,
.pkp_search button:hover, .pkp_search [type="submit"]:hover {
  background-color: var(--purple-600) !important;
  border-color: var(--purple-600) !important;
}

.pkp_navigation_search_wrapper button .fa,
.pkp_navigation_search_wrapper button svg,
.pkp_search button .fa, .pkp_search button svg {
  color: var(--on-purple) !important;
  fill: var(--on-purple) !important;
  font-size: 16px !important;
}

/* Iconos en el menú: heredan color del texto */
.pkp_navigation_primary > li > a .fa,
.pkp_navigation_primary > li > a svg,
.pkp_navigation_primary > li > a [class^="fa-"] {
  color: inherit !important;
  fill: currentColor !important;
}

/* ==========================================================
   7.B BOTONES DE DESCARGA (PDF / GALLEYS) — estilo invertido
   ========================================================== */
.galleys_links a, .galleys_links .btn, .obj_galley_link,
ul.galleys_links li a, a.pdf, a.obj_galley_link,
a[class*="galley"], a[href*=".pdf"].btn, .article-summary-galleys a {
  background-color: var(--surface) !important;
  color: var(--purple-700) !important;
  border: 2px solid var(--purple-700) !important;
  border-radius: var(--radius-sm) !important;
  padding: 9px 18px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  transition: background-color var(--ease), color var(--ease),
              box-shadow var(--ease), transform var(--ease);
  min-height: 42px !important;
  line-height: 1.2 !important;
}

.galleys_links a:hover, .galleys_links a:focus,
.obj_galley_link:hover, .obj_galley_link:focus,
ul.galleys_links li a:hover, a.pdf:hover, a.obj_galley_link:hover,
a[class*="galley"]:hover, .article-summary-galleys a:hover {
  background-color: var(--purple-700) !important;
  color: var(--on-purple) !important;
  border-color: var(--purple-700) !important;
  text-decoration: none !important;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.galleys_links a .fa, .galleys_links a svg,
.galleys_links a [class^="fa-"], .galleys_links a [class*=" fa-"],
.obj_galley_link .fa, .obj_galley_link svg,
a.pdf .fa, a.pdf svg,
a[class*="galley"] .fa, a[class*="galley"] svg,
.article-summary-galleys a .fa, .article-summary-galleys a svg {
  color: var(--purple-700) !important;
  fill: var(--purple-700) !important;
  font-size: 18px !important;
  width: 18px; height: 18px;
}

.galleys_links a:hover .fa, .galleys_links a:hover svg,
.obj_galley_link:hover .fa, .obj_galley_link:hover svg,
a.pdf:hover .fa, a.pdf:hover svg,
a[class*="galley"]:hover .fa, a[class*="galley"]:hover svg,
.article-summary-galleys a:hover .fa, .article-summary-galleys a:hover svg {
  color: var(--on-purple) !important;
  fill: var(--on-purple) !important;
}

/* ==========================================================
   8. TIPOGRAFÍA Y ENLACES
   ========================================================== */
a, .pkp_controllers_linkAction {
  color: var(--link) !important;
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover, .pkp_controllers_linkAction:hover {
  color: var(--link-hover) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:visited { color: var(--link-visited); }

.pkp_structure_content a { color: var(--link) !important; }
.pkp_structure_content a:hover { color: var(--purple-900) !important; text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
  color: var(--purple-900) !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(1.7rem, 3.2vw, 2.2rem); margin-bottom: 0.5em; }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.7rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.12rem; }

p { margin: 0 0 1em; }

blockquote {
  border-left: 4px solid var(--purple-500);
  background: var(--purple-050);
  margin: 1.4em 0;
  padding: 0.8em 1.2em;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink-soft);
  font-style: italic;
}

code, pre {
  font-family: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
  background: var(--purple-050);
  border: 1px solid var(--border);
  border-radius: 4px;
}
code { padding: 0.1em 0.4em; font-size: 0.9em; }
pre { padding: 1em; overflow-x: auto; }

/* Títulos de bloques de la barra lateral */
.pkp_block .title {
  background-color: var(--purple-050) !important;
  color: var(--purple-700) !important;
  font-family: var(--font-heading);
  font-weight: 700;
  padding: 12px 16px !important;
  border-left: 5px solid var(--purple-700) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 var(--radius-sm) 0 0;
  margin-bottom: 16px;
  font-size: 1.05rem;
}

.pkp_no_results {
  border-left: 5px solid var(--purple-700) !important;
  padding: 12px 16px;
  background-color: var(--purple-050);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ==========================================================
   8.B PULIDO DE CONTENIDO: TARJETAS, LISTAS, KEYWORDS, PAGINACIÓN
   ========================================================== */

/* Tarjetas de resumen de artículo (listado de números/issue) */
.obj_article_summary,
.article-summary,
.cmp_article_list .obj_article_summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px !important;
  margin-bottom: 18px !important;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--ease), transform var(--ease),
              border-color var(--ease);
}
.obj_article_summary:hover,
.article-summary:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--purple-100);
  transform: translateY(-2px);
}
.obj_article_summary .title a,
.article-summary .title a {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--purple-900) !important;
}
.obj_article_summary .title a:hover { color: var(--purple-700) !important; }
.obj_article_summary .meta,
.obj_article_summary .authors {
  color: var(--ink-soft) !important;
  font-size: 0.95rem;
}

/* Títulos de sección dentro de un número */
.heading,
.cmp_issue .section h2,
.obj_issue_toc .section > h2 {
  position: relative;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border);
}

/* Palabras clave como "pills" */
.item.keywords .value,
.keywords .value {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}
.item.keywords .value a,
.item.keywords .value span,
.keywords .value a {
  background: var(--purple-050);
  color: var(--purple-700) !important;
  border: 1px solid var(--purple-100);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  text-decoration: none !important;
  transition: background-color var(--ease), color var(--ease);
}
.item.keywords .value a:hover {
  background: var(--purple-700);
  color: var(--on-purple) !important;
}

/* Paginación */
.cmp_pagination, .pkp_pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 24px;
}
.cmp_pagination a, .pkp_pagination a,
.cmp_pagination .current, .pkp_pagination .current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--purple-700) !important;
  text-decoration: none !important;
}
.cmp_pagination a:hover, .pkp_pagination a:hover {
  background: var(--purple-050);
  border-color: var(--purple-500);
}
.cmp_pagination .current, .pkp_pagination .current {
  background: var(--purple-700);
  color: var(--on-purple) !important;
  border-color: var(--purple-700);
  font-weight: 600;
}

/* Tablas legibles (siguen siendo scrolleables si son anchas) */
table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
}
.pkp_structure_content table th {
  background: var(--purple-050);
  color: var(--purple-900);
  font-weight: 600;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 2px solid var(--purple-100);
}
.pkp_structure_content table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.pkp_structure_content table tr:nth-child(even) td {
  background: var(--surface-alt);
}

/* ==========================================================
   9. FORMULARIOS
   ========================================================== */
input[type="text"], input[type="email"], input[type="password"],
input[type="url"], input[type="search"], input[type="number"],
textarea, select {
  color: var(--ink) !important;
  background-color: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
  padding: 9px 14px !important;
  font-size: 15px !important;
  font-family: var(--font-body) !important;
  transition: border-color var(--ease), box-shadow var(--ease);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--purple-700) !important;
  box-shadow: 0 0 0 3px var(--purple-100) !important;
  outline: none !important;
}

label { color: var(--purple-900); font-weight: 600; }

/* ==========================================================
   10. ACCESIBILIDAD: FOCO VISIBLE (WCAG 2.1 SC 2.4.7)
   ========================================================== */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .pkp_button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}

a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute; top: -100px; left: 0;
  background: var(--purple-700);
  color: var(--on-purple) !important;
  padding: 10px 20px;
  z-index: 99999;
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { top: 0; }

/* ==========================================================
   11. ELEMENTOS A OCULTAR
   ========================================================== */
.cmp_breadcrumbs, .pkp_structure_breadcrumb, .breadcrumb { display: none !important; }
.pkp_block.block_language { display: none !important; }  /* usamos banderas arriba */
.pkp_brand_footer { display: none !important; }

/* ==========================================================
   12. AUTORES (ORCID Y EMAILS)
   ========================================================== */
.item.author .email, .item.author .orcid,
.author-meta .email, .author-meta .orcid,
.authors .email, .authors .orcid,
.author_bios .email, .author_bios .orcid {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center;
  gap: 4px;
}
.orcid img, .orcid svg { width: 16px; height: 16px; }

/* ==========================================================
   12.B FOOTER (cuando el tema lo muestra)
   ========================================================== */
.pkp_structure_footer_wrapper,
.pkp_structure_footer {
  background: var(--purple-900) !important;
  color: rgba(255,255,255,0.85) !important;
  border-top: 4px solid var(--purple-500) !important;
}
.pkp_structure_footer_wrapper a,
.pkp_structure_footer a { color: #d9c9ef !important; }
.pkp_structure_footer_wrapper a:hover { color: #fff !important; }

/* ==========================================================
   12.C ESCRITORIO (≥ 992px): OCULTAR HAMBURGUESA
   El orden de la cabecera (usuario → imagen → menú) se logra
   fijando la barra de usuario arriba (position:absolute) y
   reservando esa franja con padding-top en header.pkp_structure_head.
   No dependemos del orden del HTML del tema.
   ========================================================== */
@media (min-width: 992px) {
  .pkp_primary_nav_toggle,
  .pkp_site_nav_toggle,
  a[id*="NavigationPrimaryToggle"],
  button[aria-controls*="primaryNav"],
  .pkp_nav_toggle {
    display: none !important;
  }
}

/* ==========================================================
   13. RESPONSIVE — TABLET Y MÓVIL (≤ 991px)
   - Banner sigue full-width.
   - Barra de usuario entra en flujo.
   - Menú colapsado con hamburguesa.
   - Contenido y sidebar se apilan.
   ========================================================== */
@media (max-width: 991px) {

  header.pkp_structure_head { padding-top: 0 !important; }

  /* ===== MENÚ MÓVIL UNIFICADO: panel CLARO, legible y cohesivo ===== */
  .pkp_navigation_user_wrapper {
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important;
    height: auto !important;
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border) !important;
  }

  /* Barra de usuario en móvil: LISTA VERTICAL clara a ancho completo. */
  .pkp_navigation_user {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: var(--surface) !important;
  }

  .pkp_navigation_user > li {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .pkp_navigation_user > li:last-child { border-bottom: none !important; }

  .pkp_navigation_user > li > a {
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 15px 20px !important;
    min-height: 52px !important;
    min-width: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    background: var(--surface) !important;
    border-radius: 0 !important;
    border-left: 4px solid transparent !important;
  }
  .pkp_navigation_user > li > a:hover,
  .pkp_navigation_user > li > a:focus {
    background-color: var(--purple-050) !important;
    color: var(--purple-700) !important;
    border-left-color: var(--purple-700) !important;
  }

  /* Idiomas en móvil: texto visible (+ bandera si el selector aplica). */
  .pkp_navigation_user > li > a[href*="setLocale"],
  .pkp_navigation_user > li > a[href*="locale="] {
    width: 100% !important;
    height: auto !important;
    font-size: 15px !important;
    color: var(--ink) !important;
    padding: 15px 20px !important;
    overflow: visible !important;
  }
  .pkp_navigation_user > li > a[href*="setLocale"]::before,
  .pkp_navigation_user > li > a[href*="locale="]::before {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    margin-right: 10px !important;
    font-size: 18px !important;
  }

  /* Submenú de usuario (Panel de control, Salir…): en flujo, claro e indentado */
  .pkp_navigation_user > li > ul {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    border-left: 3px solid var(--purple-500) !important;
    background-color: var(--surface-alt) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  .pkp_navigation_user ul li a {
    color: var(--ink) !important;
    background: var(--surface-alt) !important;
    padding: 13px 20px 13px 38px !important;
    min-height: 48px !important;
    font-weight: 500 !important;
    border-bottom: 1px solid var(--border) !important;
    border-left: 3px solid transparent !important;
    white-space: normal !important;
  }
  .pkp_navigation_user ul li:last-child a { border-bottom: none !important; }
  .pkp_navigation_user ul li a:hover,
  .pkp_navigation_user ul li a:focus {
    background: var(--purple-050) !important;
    color: var(--purple-700) !important;
    padding-left: 42px !important;
    border-left-color: var(--purple-700) !important;
  }

  /* ============================================================
     DRAWER LATERAL — ajustado a la estructura REAL de este tema:
       · Botón único: button.pkp_site_nav_toggle (trae su ícono ☰/✕)
       · Panel:       nav.pkp_site_nav_menu (contiene TODO:
                      páginas + buscador + idiomas + cuenta)
     El tema decide cuándo mostrar/ocultar el panel; aquí solo le
     damos forma de cajón deslizante desde la izquierda + fondo oscuro.
     ============================================================ */

  /* La imagen de cabecera es muy ancha (3072×512) y se montaba sobre el
     contenido en móvil. La ocultamos SOLO en móvil y dejamos una franja
     superior morada con el botón de menú. (No ocultamos el contenedor
     completo porque el botón vive dentro de él.) */
  .pkp_site_name_wrapper .pkp_site_name,
  .pkp_head_wrapper .pkp_site_name { display: none !important; }
  .pkp_site_name_wrapper {
    padding: 0 !important;
    min-height: 58px !important;          /* franja para el botón flotante */
    background: var(--purple-900) !important;
    z-index: auto !important;
    overflow: visible !important;
  }

  /* Botón hamburguesa: ícono ☰ / ✕, fijo arriba-izquierda y SIEMPRE por
     encima del drawer para poder cerrar el menú. */
  .pkp_site_nav_toggle {
    position: fixed !important;
    top: 8px !important;
    left: 10px !important;
    z-index: 100001 !important;
    width: 46px !important;
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: var(--purple-700) !important;     /* sólido: visible sobre cualquier fondo */
    border: none !important;
    border-radius: 8px !important;
    box-shadow: var(--shadow-md) !important;
    color: var(--on-purple) !important;
    cursor: pointer !important;
  }
  .pkp_site_nav_toggle:hover,
  .pkp_site_nav_toggle:focus { background-color: var(--purple-600) !important; }

  /* Ícono propio en el botón: ☰ (cerrado) y ✕ (abierto) para que se
     entienda que ahí se abre/cierra el menú. */
  .pkp_site_nav_toggle::before {
    content: "\2630" !important;          /* ☰ */
    font-size: 24px !important;
    line-height: 1 !important;
    color: var(--on-purple) !important;
  }
  .pkp_site_nav_toggle[aria-expanded="true"]::before,
  .pkp_site_nav_toggle.is-open::before,
  .pkp_site_nav_toggle.expanded::before,
  .pkp_site_nav_toggle.active::before,
  body.drawer-open .pkp_site_nav_toggle::before {
    content: "\2715" !important;          /* ✕ */
  }

  /* "Open Menu" es texto solo para lectores de pantalla */
  .pkp_site_nav_toggle > span {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0 0 0 0) !important;
    white-space: nowrap !important; border: 0 !important;
  }

  /* Panel de navegación = DRAWER deslizante desde la izquierda.
     (No tocamos su display: el tema lo muestra/oculta con el botón.) */
  .pkp_site_nav_menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    width: 86% !important;
    max-width: 360px !important;
    margin: 0 !important;
    padding: 60px 0 32px 0 !important;     /* hueco arriba para el botón ✕ */
    background: var(--surface) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 10000 !important;
    /* fondo oscurecido a pantalla completa + sombra del panel */
    box-shadow: 0 0 0 100vmax rgba(20, 10, 35, 0.55),
                10px 0 30px rgba(0, 0, 0, 0.35) !important;
    border-right: 3px solid var(--purple-700) !important;
  }
  .pkp_site_nav_menu > a[id="siteNav"] { display: block !important; height: 0 !important; }

  /* Título del drawer */
  .pkp_site_nav_menu::before {
    content: "Menú";
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--purple-900);
    padding: 0 20px 12px 20px;
    margin-bottom: 4px;
    border-bottom: 2px solid var(--border);
  }

  /* Filas internas del drawer: apiladas a ancho completo, sin recuadros */
  .pkp_navigation_primary_wrapper,
  .pkp_navigation_primary_row {
    position: static !important;
    height: auto !important;
    display: block !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
  }

  /* Navegación de PÁGINAS: visible dentro del drawer */
  .pkp_navigation_primary {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    flex-grow: 0 !important;
    background: transparent !important;
  }

  .pkp_navigation_primary > li {
    width: 100% !important;
    height: auto !important;
    border-bottom: 1px solid var(--border) !important;
    display: block !important;
  }

  .pkp_navigation_primary > li > a {
    width: 100% !important;
    height: auto !important;
    padding: 16px 20px !important;
    justify-content: flex-start !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
    border-left: 4px solid transparent !important;
    font-size: 15px !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
  }

  .pkp_navigation_primary > li > a:hover,
  .pkp_navigation_primary > li.current > a {
    border-left-color: var(--purple-700) !important;
    border-bottom: none !important;
  }

  .pkp_navigation_primary > li > ul {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    border-left: 3px solid var(--purple-700) !important;
    background-color: var(--surface-alt) !important;
  }

  .pkp_navigation_primary ul li a {
    padding: 14px 14px 14px 36px !important;
    background-color: var(--surface-alt) !important;
    min-height: 48px !important;
  }

  /* Buscador (en este tema es un ENLACE "Buscar", no un input): se muestra
     como un ítem más del drawer, a ancho completo. */
  .pkp_navigation_search_wrapper {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--surface) !important;
    border-top: 1px solid var(--border) !important;
    display: block !important;
  }
  .pkp_navigation_search_wrapper a.pkp_search,
  .pkp_navigation_search_wrapper > a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 15px 20px !important;
    min-height: 52px !important;
    color: var(--ink) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-left: 4px solid transparent !important;
  }
  .pkp_navigation_search_wrapper a.pkp_search:hover,
  .pkp_navigation_search_wrapper a.pkp_search:focus,
  .pkp_navigation_search_wrapper > a:hover {
    background: var(--purple-050) !important;
    color: var(--purple-700) !important;
    border-left-color: var(--purple-700) !important;
  }
  .pkp_navigation_search_wrapper a .fa,
  .pkp_navigation_search_wrapper a svg {
    color: var(--purple-700) !important;
    fill: var(--purple-700) !important;
    font-size: 17px !important;
  }

  /* Si en algún caso fuera un input, también se ve completo */
  .pkp_search input[type="search"], .pkp_search input[type="text"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 44px !important;
  }
  .pkp_search button { min-height: 44px !important; min-width: 52px !important; }

  /* Contenido y sidebar apilados */
  .pkp_structure_content.has_sidebar { display: block !important; }
  .pkp_structure_main, .pkp_structure_sidebar {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }
  .pkp_structure_sidebar {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 2px solid var(--border);
  }

  .galleys_links a, .obj_galley_link, a.pdf, a[class*="galley"] {
    margin: 8px 8px 8px 0 !important;
    padding: 12px 20px !important;
    min-height: 48px !important;
    font-size: 15px !important;
  }
}

/* ==========================================================
   14. RESPONSIVE — MÓVIL (≤ 575px)
   ========================================================== */
@media (max-width: 575px) {
  body { font-size: 15px; }

  /* Mantener la lista vertical full-width; solo ajustar densidad */
  .pkp_navigation_user > li > a {
    padding: 13px 16px !important;
    font-size: 14px !important;
    min-height: 48px !important;
  }
  .pkp_navigation_user ul li a {
    padding: 12px 16px 12px 32px !important;
    min-height: 46px !important;
  }

  /* Banner en móvil: sigue full-width; sin huecos ni recortes */
  .pkp_site_name_wrapper { padding: 0 !important; }
  .pkp_site_name_wrapper .is_img,
  .pkp_site_name_wrapper > a { width: 100% !important; display: block !important; }
  .pkp_site_name_wrapper .is_img img,
  .pkp_site_name_wrapper img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  .pkp_site_name_wrapper .pkp_site_name,
  .pkp_site_name_wrapper .pkp_site_name a { padding: 20px 14px !important; }

  .pkp_navigation_primary > li > a {
    font-size: 15px !important;
    padding: 16px 16px !important;
    min-height: 52px !important;
  }

  .pkp_search input[type="search"], .pkp_search input[type="text"] {
    font-size: 16px !important;   /* evita zoom automático en iOS */
    min-height: 46px !important;
  }

  .galleys_links a, .obj_galley_link, a.pdf, a[class*="galley"] {
    display: inline-flex !important;
    margin: 6px 6px 6px 0 !important;
    padding: 14px 22px !important;
    font-size: 16px !important;
    min-height: 50px !important;
    min-width: 110px !important;
  }

  .obj_article_summary, .article-summary { padding: 16px !important; }
}

/* ==========================================================
   15. RESPONSIVE — MÓVIL PEQUEÑO (≤ 375px)
   ========================================================== */
@media (max-width: 375px) {
  .pkp_navigation_user > li > a { padding: 8px 8px !important; font-size: 12px !important; }
  .pkp_navigation_primary > li > a { padding: 14px 14px !important; }
  .pkp_navigation_search_wrapper { padding: 10px 10px !important; }
}

/* ==========================================================
   16. REDUCCIÓN DE MOVIMIENTO
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .obj_article_summary:hover,
  button:hover, .galleys_links a:hover { transform: none !important; }
}

/* ==========================================================
   17. IMPRESIÓN
   ========================================================== */
@media print {
  .pkp_navigation_user_wrapper, .pkp_navigation_primary_wrapper,
  .pkp_navigation_search_wrapper, .pkp_structure_sidebar,
  .pkp_brand_footer, button, .button { display: none !important; }

  header.pkp_structure_head { background: var(--surface) !important; padding: 0 !important; }
  .pkp_site_name_wrapper { background: var(--surface) !important; }
  a { color: #000 !important; text-decoration: underline; }
  body { color: #000; background: #fff; }
}