/* Crisol azul editorial — OJS 3.4 / Pragma 1.1.2-3
 * Versión azul 1.1 — 7 de octubre de 2026
 * Cabecera blanca, navegación azul, contenido claro y pie azul grisáceo.
 * Cargar como hoja de estilo de la revista, reemplazando el CSS anterior.
 * Guardar primero una copia del archivo anterior para revertir.
 * Compatible con Pragma original y con el tema hijo Crisol — Pragma.
 * El segundo logo requiere el tema hijo; esta hoja no añade imágenes.
 * No cambia archivos originales, textos, tipografía ni contenido.
 * Sin recursos externos ni !important. No altera la visibilidad del menú
 * que controla Bootstrap. Ajustes de distribución limitados a cabecera/pie.
 * Selectores revisados con https://github.com/pkp/pragma/tree/v1_1_2-3
 * Revisar en OJS inicio, login, artículos, submenús y móvil después de cargar.
 */

/* 1. Superficie pública y texto */

body[class^="page_"] {
  background-color: #F7F9FC;
  color: #202A36;
}

body[class^="page_"] #main,
body[class^="page_"] .modal .modal-content {
  background-color: #F7F9FC;
  color: #202A36;
}

body[class^="page_"] h1,
body[class^="page_"] h2,
body[class^="page_"] h3,
body[class^="page_"] h4,
body[class^="page_"] h5,
body[class^="page_"] h6,
body[class^="page_"] th,
body[class^="page_"] code,
body[class^="page_"] .metadata,
body[class^="page_"] .issue-section,
body[class^="page_"] .issue-section__title,
body[class^="page_"] .modal .close {
  color: #202A36;
}

body[class^="page_"] a {
  color: #073B88;
}

body[class^="page_"] a:hover,
body[class^="page_"] a:focus {
  color: #073B88;
  text-decoration: underline;
}

body[class^="page_"] hr,
body[class^="page_"] blockquote,
body[class^="page_"] thead,
body[class^="page_"] tr,
body[class^="page_"] .galley__content iframe {
  border-color: #68788C;
}

body[class^="page_"] ::selection {
  background-color: #202A36;
  color: #FFFFFF;
}

/* 3. Campos; borde oscuro para reconocer el control sobre fondo claro */

body[class^="page_"] .form-control,
body[class^="page_"] .form-control:hover,
body[class^="page_"] .form-control:focus,
body[class^="page_"] .form-control:active,
body[class^="page_"] select {
  background-color: #FFFFFF;
  color: #202A36;
  border-color: #68788C;
}

body[class^="page_"] .form-control::placeholder {
  color: #526174;
  opacity: 1;
}

body[class^="page_"] .form-control:disabled,
body[class^="page_"] .form-control[readonly] {
  background-color: #EAF0F7;
  color: #526174;
}

body[class^="page_"] .form-check-input {
  border-color: #68788C;
  accent-color: #073B88;
}

body[class^="page_"] .form-check-input:checked {
  background-color: #073B88;
  border-color: #073B88;
}

body[class^="page_"] input:-webkit-autofill,
body[class^="page_"] input:-webkit-autofill:hover,
body[class^="page_"] input:-webkit-autofill:focus,
body[class^="page_"] textarea:-webkit-autofill,
body[class^="page_"] select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset;
  -webkit-text-fill-color: #202A36;
  border-color: #68788C;
}

/* 4. Botones de Pragma; mantener el menú y el cierre del modal independientes */

body[class^="page_"] .btn.btn-primary {
  background-color: #073B88;
  border-color: #073B88;
  color: #FFFFFF;
  text-decoration: none;
}

body[class^="page_"] .btn.btn-primary:hover,
body[class^="page_"] .btn.btn-primary:focus,
body[class^="page_"] .btn.btn-primary:not(:disabled):not(.disabled):active,
body[class^="page_"] .btn.btn-primary:not(:disabled):not(.disabled).active,
body[class^="page_"] .show > .btn.btn-primary.dropdown-toggle {
  background-color: #073B88;
  border-color: #073B88;
  color: #FFFFFF;
}

body[class^="page_"] .btn.btn-secondary {
  background-color: transparent;
  border-color: #073B88;
  color: #073B88;
  text-decoration: none;
}

body[class^="page_"] .btn.btn-secondary:hover,
body[class^="page_"] .btn.btn-secondary:focus,
body[class^="page_"] .btn.btn-secondary:active {
  background-color: #073B88;
  border-color: #073B88;
  color: #FFFFFF;
}

/* Cabecera clara y marca: sin fondo coloreado al pasar sobre los logos. */

body[class^="page_"] .main-header {
  background-color: #FFFFFF;
  color: #202A36;
  min-height: 0;
  padding: 8px 0 0;
}

body[class^="page_"] .main-header a,
body[class^="page_"] .main-header .main-menu__title {
  color: #073B88;
}

body[class^="page_"] .main-header__admin {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  flex-wrap: wrap;
  gap: 4px 12px;
}

body[class^="page_"] .main-header__admin a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

body[class^="page_"] .main-header__admin a:hover,
body[class^="page_"] .main-header__admin a:focus {
  background-color: #F7F9FC;
  color: #073B88;
  text-decoration: underline;
}

/* Pragma original: logo en primera fila, navegación en la siguiente. */

body[class^="page_"] .main-header .main-menu {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: #FFFFFF;
}

body[class^="page_"] .main-header .main-menu > .main-menu__title {
  grid-row: 1;
  margin: 0;
  padding: 16px 24px;
}

body[class^="page_"] .main-header .main-menu__title a,
body[class^="page_"] .main-header .main-menu__title a:hover,
body[class^="page_"] .main-header .main-menu__title a:focus {
  background-color: transparent;
  color: #073B88;
  padding: 0;
}

body[class^="page_"] .main-header .main-menu__title img {
  display: block;
  height: 140px;
  max-height: 140px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

body[class^="page_"] .main-header .main-menu > .hamburger {
  grid-row: 2;
  margin: 0;
  justify-self: start;
  min-height: 48px;
  height: auto;
  padding: 12px 24px;
  background-color: #073B88;
  color: #FFFFFF;
  border-color: #073B88;
}

body[class^="page_"] .main-header .main-menu > .main-menu__nav {
  grid-row: 3;
  margin: 0;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background-color: #073B88;
  color: #FFFFFF;
  padding: 8px 20px;
}

body[class^="page_"] .main-header .main-menu__nav .navbar-nav {
  flex-wrap: wrap;
  gap: 4px;
  text-align: start;
}

body[class^="page_"] .main-header .main-menu__nav .main-menu__nav-link {
  color: #FFFFFF;
  min-height: 44px;
  padding: 10px 16px;
  box-sizing: border-box;
}

body[class^="page_"] .main-header .main-menu__nav .main-menu__nav-link:hover,
body[class^="page_"] .main-header .main-menu__nav .main-menu__nav-link:focus,
body[class^="page_"] .main-header .main-menu__nav .active > .main-menu__nav-link {
  background-color: #052B63;
  color: #FFFFFF;
  text-decoration: underline;
}

body[class^="page_"] .main-header .hamburger__icon,
body[class^="page_"] .main-header .hamburger__icon::before,
body[class^="page_"] .main-header .hamburger__icon::after {
  background-color: #FFFFFF;
}

body[class^="page_"] .main-header .crisol-menu-label {
  color: #FFFFFF;
}

/* Submenús claros: mantiene su apertura y posición gestionadas por Pragma. */

body[class^="page_"] .main-header .dropdown-menu {
  background-color: #FFFFFF;
  border: 1px solid #CED8E5;
  box-shadow: 0 6px 18px rgba(41, 37, 36, 0.12);
}

body[class^="page_"] .main-header .dropdown-menu .dropdown-item a {
  background-color: #FFFFFF;
  color: #073B88;
  padding: 12px 18px;
  min-height: 44px;
  box-sizing: border-box;
}

body[class^="page_"] .main-header .dropdown-menu .dropdown-item a:hover,
body[class^="page_"] .main-header .dropdown-menu .dropdown-item a:focus,
body[class^="page_"] .main-header .dropdown-menu .dropdown-item a:active,
body[class^="page_"] .main-header .dropdown-menu .dropdown-item a.active {
  background-color: #EDF3FC;
  color: #073B88;
  text-decoration: underline;
}

/* Tema hijo: mantiene ambos logos en la fila superior. */

body[class^="page_"] .main-header .crisol-brand-row {
  max-width: 1200px;
  width: 100%;
  box-sizing: border-box;
  padding: 16px 24px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

body[class^="page_"] .main-header .crisol-brand-row .main-menu__title {
  margin: 0;
  padding: 0;
  min-width: 0;
}

body[class^="page_"] .main-header .crisol-institution,
body[class^="page_"] .main-header .crisol-institution:hover,
body[class^="page_"] .main-header .crisol-institution:focus {
  background-color: #FFFFFF;
  color: #073B88;
}

body[class^="page_"] .main-header .crisol-institution img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

body[class^="page_"] .main-header .main-menu.crisol-navigation {
  display: flex;
  flex-wrap: wrap;
  max-width: none;
  margin: 0;
  padding: 8px 20px;
  box-sizing: border-box;
  border-top: 0;
  background-color: #073B88;
}

body[class^="page_"] .main-header .crisol-navigation > .main-menu__nav {
  padding: 0;
}

/* Pie más ligero; sin altura fija ni recorte del contenido. */

body[class^="page_"] .main-footer {
  background-color: #EAF0F7;
  color: #3F4B5C;
  padding: 32px 0;
}

body[class^="page_"] .main-footer h1,
body[class^="page_"] .main-footer h2,
body[class^="page_"] .main-footer h3,
body[class^="page_"] .main-footer h4,
body[class^="page_"] .main-footer h5,
body[class^="page_"] .main-footer h6,
body[class^="page_"] .main-footer p,
body[class^="page_"] .main-footer li,
body[class^="page_"] .main-footer address {
  color: #3F4B5C;
}

body[class^="page_"] .main-footer p,
body[class^="page_"] .main-footer li {
  margin-bottom: 0.75rem;
}

body[class^="page_"] .main-footer a,
body[class^="page_"] .main-footer a:hover,
body[class^="page_"] .main-footer a:focus {
  color: #073B88;
  text-decoration: underline;
}

body[class^="page_"] .main-footer hr {
  border-color: #68788C;
  margin: 20px 0;
}

body[class^="page_"] .main-footer .btn.btn-secondary {
  background-color: transparent;
  border-color: #073B88;
  color: #073B88;
  text-decoration: none;
}

body[class^="page_"] .main-footer .btn.btn-secondary:hover,
body[class^="page_"] .main-footer .btn.btn-secondary:focus {
  background-color: #073B88;
  border-color: #073B88;
  color: #FFFFFF;
}

body[class^="page_"] [role="alert"] {
  background-color: #202A36;
  color: #FFFFFF;
}

body[class^="page_"] [role="alert"] a,
body[class^="page_"] [role="alert"] a:hover,
body[class^="page_"] [role="alert"] a:focus {
  color: #FFFFFF;
  text-decoration: underline;
}

/* Foco de teclado: oscuro sobre superficies claras, blanco sobre azul. */

body[class^="page_"] a:focus-visible,
body[class^="page_"] button:focus-visible,
body[class^="page_"] input:focus-visible,
body[class^="page_"] select:focus-visible,
body[class^="page_"] textarea:focus-visible {
  outline: 2px solid #073B88;
  outline-offset: 3px;
}

body[class^="page_"] .main-header a:focus-visible,
body[class^="page_"] .main-header button:focus-visible,
body[class^="page_"] .main-footer a:focus-visible,
body[class^="page_"] .main-footer button:focus-visible {
  outline: 2px solid #073B88;
  outline-offset: 3px;
  box-shadow: none;
}

body[class^="page_"] .main-header .main-menu__nav .main-menu__nav-link:focus-visible,
body[class^="page_"] .main-header .hamburger:focus-visible,
body[class^="page_"] .btn.btn-primary:focus-visible,
body[class^="page_"] [role="alert"] a:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: -4px;
  box-shadow: 0 0 0 2px #073B88;
}

/* Los enlaces de salto existentes de Pragma se hacen visibles al recibir foco */

body[class^="page_"] > div > a.visually-hidden:focus {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.75rem 1rem;
  clip: auto;
  clip-path: none;
  overflow: visible;
  white-space: normal;
  z-index: 1100;
  background-color: #FFFFFF;
  color: #202A36;
}

@media (max-width: 991.98px) {
body[class^="page_"] .main-header .main-menu {
  background-color: #073B88;
}

body[class^="page_"] .main-header .main-menu > .main-menu__title {
  background-color: #FFFFFF;
}

body[class^="page_"] .main-header .main-menu__nav li {
  display: block;
}

body[class^="page_"] .main-header .main-menu__nav .dropdown-menu {
  position: static;
  max-width: 100%;
}

}

@media (max-width: 575.98px) {
body[class^="page_"] .main-header .main-menu__title img {
  height: 90px;
  max-height: 90px;
}

body[class^="page_"] .main-header .main-menu > .main-menu__title,
body[class^="page_"] .main-header .crisol-brand-row {
  padding: 12px 16px;
}

body[class^="page_"] .main-header .crisol-brand-row {
  gap: 16px;
}

body[class^="page_"] .main-header .crisol-institution img {
  width: 64px;
  height: 64px;
}

body[class^="page_"] .main-header .main-menu > .main-menu__nav,
body[class^="page_"] .main-header .main-menu.crisol-navigation {
  padding: 8px 12px;
}

body[class^="page_"] .main-footer {
  padding: 24px 0;
}

}

/* 8. Menús y botones refinados — reemplaza el CSS editorial anterior.
 * Sin subrayados en navegación ni botones. Foco visible solo con teclado.
 * Enlaces dentro de artículos y contenido conservan sus señales de enlace.
 */
body[class^="page_"] .main-header .main-menu__nav .navbar-nav {
  gap: 6px;
}
body[class^="page_"] .main-header .main-menu__nav .main-menu__nav-item {
  position: relative;
  margin: 0;
}
body[class^="page_"] .main-header .main-menu__nav .main-menu__nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 6px;
  font-weight: 500;
  text-decoration: none;
  background-color: transparent;
  color: #FFFFFF;
  transition: background-color 140ms ease, color 140ms ease;
}
body[class^="page_"] .main-header .main-menu__nav .main-menu__nav-link:hover,
body[class^="page_"] .main-header .main-menu__nav .main-menu__nav-link:focus,
body[class^="page_"] .main-header .main-menu__nav .main-menu__nav-link[aria-expanded="true"],
body[class^="page_"] .main-header .main-menu__nav .active > .main-menu__nav-link {
  background-color: #052B63;
  color: #FFFFFF;
  text-decoration: none;
}
body[class^="page_"] .main-header__admin a,
body[class^="page_"] .main-header__admin a:hover,
body[class^="page_"] .main-header__admin a:focus {
  text-decoration: none;
  border-radius: 6px;
}
body[class^="page_"] .main-header .dropdown-menu {
  text-align: left;
  padding: 6px;
  min-width: 240px;
  max-width: calc(100vw - 32px);
  background-color: #FFFFFF;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(41, 37, 36, 0.16);
}
body[class^="page_"] .main-header .dropdown-menu .dropdown-item {
  display: block;
  margin: 0;
  padding: 0;
  background-color: transparent;
}
body[class^="page_"] .main-header .dropdown-menu .dropdown-item a {
  display: block;
  padding: 12px 14px;
  border-radius: 5px;
  color: #073B88;
  background-color: #FFFFFF;
  text-align: left;
  text-decoration: none;
  white-space: normal;
  font-weight: 400;
}
body[class^="page_"] .main-header .dropdown-menu .dropdown-item a:hover,
body[class^="page_"] .main-header .dropdown-menu .dropdown-item a:focus,
body[class^="page_"] .main-header .dropdown-menu .dropdown-item a:active,
body[class^="page_"] .main-header .dropdown-menu .dropdown-item a.active {
  background-color: #EDF3FC;
  color: #073B88;
  text-decoration: none;
}
body[class^="page_"] .btn.btn-primary,
body[class^="page_"] .btn.btn-secondary {
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 7px;
  border: 1px solid transparent;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease;
}
body[class^="page_"] .btn.btn-primary {
  background-color: #073B88;
  border-color: #073B88;
  color: #FFFFFF;
}
body[class^="page_"] .btn.btn-primary:hover,
body[class^="page_"] .btn.btn-primary:focus,
body[class^="page_"] .btn.btn-primary:not(:disabled):not(.disabled):active,
body[class^="page_"] .btn.btn-primary:not(:disabled):not(.disabled).active,
body[class^="page_"] .show > .btn.btn-primary.dropdown-toggle {
  background-color: #052B63;
  border-color: #052B63;
  color: #FFFFFF;
  text-decoration: none;
}
body[class^="page_"] .btn.btn-secondary,
body[class^="page_"] .main-footer .btn.btn-secondary {
  background-color: #E7EFFB;
  border-color: transparent;
  color: #073B88;
}
body[class^="page_"] .btn.btn-secondary:hover,
body[class^="page_"] .btn.btn-secondary:focus,
body[class^="page_"] .btn.btn-secondary:active,
body[class^="page_"] .main-footer .btn.btn-secondary:hover,
body[class^="page_"] .main-footer .btn.btn-secondary:focus {
  background-color: #D5E3F8;
  border-color: transparent;
  color: #052B63;
  text-decoration: none;
}
body[class^="page_"] .main-header .hamburger {
  border-radius: 6px;
}
@media (min-width: 992px) {
  body[class^="page_"] .main-header #navigationPrimary .dropdown-menu,
  body[class^="page_"] .main-header #navigationPrimary .dropdown-menu[data-bs-popper] {
    left: 0;
    right: auto;
    margin-top: 8px;
  }
}
@media (max-width: 991.98px) {
  body[class^="page_"] .main-header .main-menu__nav .dropdown-menu {
    position: static;
    min-width: 0;
    width: 100%;
    margin: 6px 0;
    box-shadow: none;
    box-sizing: border-box;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[class^="page_"] .main-header .main-menu__nav .main-menu__nav-link,
  body[class^="page_"] .btn.btn-primary,
  body[class^="page_"] .btn.btn-secondary {
    transition: none;
  }
}

/* 9. Presentación de la revista: sustituye el borde heredado de Pragma. */
body[class^="page_"] .journal-desc {
  background-color: #EDF3FC;
  border: 1px solid #C4D6EF;
  border-radius: 10px;
  padding: 24px;
  color: #202A36;
  box-sizing: border-box;
}
body[class^="page_"] .journal-desc .metadata {
  color: #3F4B5C;
  font-weight: 500;
  margin: 0 0 8px;
}
body[class^="page_"] .journal-desc__title {
  color: #202A36;
  margin: 0 0 12px;
  font-size: 1.5rem;
  line-height: 1.3;
}
body[class^="page_"] .journal-desc article > p:last-child {
  margin-bottom: 0;
}
/* Pie: texto oscuro y jerarquía sin modificar el contenido institucional. */
body[class^="page_"] .main-footer {
  background-color: #EAF0F7;
  color: #202A36;
  padding: 28px 0;
}
body[class^="page_"] .main-footer p,
body[class^="page_"] .main-footer li,
body[class^="page_"] .main-footer address {
  color: #202A36;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: normal;
  margin-bottom: 10px;
}
body[class^="page_"] .main-footer h1,
body[class^="page_"] .main-footer h2,
body[class^="page_"] .main-footer h3,
body[class^="page_"] .main-footer h4,
body[class^="page_"] .main-footer h5,
body[class^="page_"] .main-footer h6,
body[class^="page_"] .main-footer strong,
body[class^="page_"] .main-footer b {
  color: #202A36;
  font-weight: 700;
  letter-spacing: normal;
}
body[class^="page_"] .main-footer__block > .col-md-8 > p:first-child,
body[class^="page_"] .main-footer__block > .col-md-8 > p:nth-child(2) {
  font-weight: 600;
  color: #202A36;
}
body[class^="page_"] .main-footer hr {
  border-color: #C4D6EF;
  margin: 18px 0;
}
@media (max-width: 575.98px) {
  body[class^="page_"] .journal-desc {
    padding: 18px;
  }
  body[class^="page_"] .main-footer {
    padding: 24px 0;
  }
}


/* 10. Cabecera compacta y barra azul persistente — Pragma original.
 * Cargar crisol-banner-delgado-con-nombre.png, que ya está recortado.
 * El CSS no puede eliminar márgenes blancos contenidos en otro archivo PNG.
 * display: contents elimina las cajas que limitarían el recorrido de sticky.
 */
body[class^="page_"] .main-header,
body[class^="page_"] .main-header .main-menu {
  display: contents;
}
body[class^="page_"] .main-header__admin {
  background-color: #FFFFFF;
  margin: 0 auto;
  padding: 0 20px;
  min-height: 32px;
}
body[class^="page_"] .main-header__admin a {
  min-height: 32px;
  padding-top: 4px;
  padding-bottom: 4px;
}
body[class^="page_"] .main-header .main-menu > .main-menu__title {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  line-height: 0;
  background-color: #FFFFFF;
  box-sizing: border-box;
}
body[class^="page_"] .main-header .main-menu__title > a,
body[class^="page_"] .main-header .main-menu__title > a:hover,
body[class^="page_"] .main-header .main-menu__title > a:focus {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
  background-color: #FFFFFF;
}
body[class^="page_"] .main-header .main-menu__title img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1440px;
  max-height: none;
  margin: 0 auto;
  object-fit: contain;
}
body[class^="page_"] .main-header .main-menu > #mainMenu.main-menu__nav {
  position: sticky;
  top: 0;
  z-index: 1020;
  width: 100%;
  margin: 0;
  padding: 6px 20px;
  background-color: #073B88;
  box-shadow: 0 3px 10px rgba(32, 42, 54, 0.12);
  box-sizing: border-box;
}
html {
  scroll-padding-top: 80px;
}
body[class^="page_"] #main,
body[class^="page_"] #main [id] {
  scroll-margin-top: 80px;
}
@media (max-width: 991.98px) {
  body[class^="page_"] .main-header .main-menu > .hamburger {
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1021;
    width: 100%;
    height: 48px;
    min-height: 48px;
    margin: 0;
    padding: 12px 20px;
    border-radius: 0;
    background-color: #073B88;
    box-sizing: border-box;
  }
  body[class^="page_"] .main-header .main-menu > #mainMenu.main-menu__nav {
    top: 48px;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
  }
}