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

/* ============================================================
   Revista Multidisciplinar Investigium
   Hoja de estilo institucional — Instituto Superior Tecnológico Bet-el
   Para: Ajustes > Sitio web > Apariencia > Hoja de estilo de la revista
   ============================================================ */

:root{
  /* --- Paleta institucional --- */
  --bt-plum:      #4A2557;   /* ciruela: titulares, cabecera */
  --bt-purple:    #6B3A80;   /* morado profundo: botones, acentos */
  --bt-purple-mid:#8E6EA9;   /* morado medio: barra, enlaces */
  --bt-purple-soft:#C3ABD3;  /* bordes y separadores */
  --bt-lavender:  #F5EEF8;   /* fondos de sección y pie */
  --bt-gold:      #F2C230;   /* dorado institucional */
  --bt-gold-dark: #C99A18;   /* estado hover del dorado */

  /* --- Acento propio de la revista (banner y portadas) --- */
  --bt-orange:    #E2662C;   /* naranja Investigium */
  --bt-orange-dk: #C4501C;   /* estado hover del naranja */

  /* --- Neutros con leve sesgo hacia el morado --- */
  --bt-ink:       #221A26;
  --bt-ink-2:     #4A3F50;
  --bt-ink-3:     #6E6274;
  --bt-line:      #E2DAE7;
  --bt-line-soft: #F0EAF3;
  --bt-paper:     #FFFFFF;

  /* --- Semánticos --- */
  --bt-ok:        #1F6249;
  --bt-warn:      #8A5A10;
  --bt-error:     #A03328;

  --bt-radius:    6px;
  --bt-shadow:    0 1px 2px rgba(74,37,87,.06), 0 8px 24px -18px rgba(74,37,87,.35);
  --bt-focus:     0 0 0 3px rgba(142,110,169,.45);
}

/* ============================================================
   1. BASE Y TIPOGRAFÍA
   ============================================================ */

body{
  font-family:"Source Sans 3","Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--bt-ink);
  background:var(--bt-paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5,h6,
.pkp_site_name,
.obj_article_summary > .title,
.obj_issue_summary > .title{
  font-family:Montserrat,"Source Sans 3",Helvetica,Arial,sans-serif;
  color:var(--bt-plum);
  letter-spacing:-.01em;
  text-wrap:balance;
}

/* Los títulos de artículo son largos: que respiren y no se corten */
h1,h2{ line-height:1.22; }
h3,h4{ line-height:1.3; }

p,li{ line-height:1.65; }

a{ color:var(--bt-purple); text-underline-offset:3px; }
a:hover{ color:var(--bt-plum); text-decoration:underline; }
a:active{ color:var(--bt-plum); }

/* Foco visible en TODO lo enfocable: requisito de accesibilidad
   y lo que peor resuelve el tema por defecto de OJS */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--bt-purple);
  outline-offset:2px;
  box-shadow:var(--bt-focus);
  border-radius:3px;
}

::selection{ background:var(--bt-purple-soft); color:var(--bt-plum); }

/* ============================================================
   2. CABECERA Y NAVEGACIÓN
   Estructura: banda blanca con identidad  +  barra morada de navegación
   ============================================================ */

/* --- Banda superior: identidad --- */
.pkp_structure_head{
  background:var(--bt-paper);
  border-bottom:none;
  box-shadow:none;
  /* El contenido (.pkp_structure_content) es position:relative y va
     despues en el HTML, asi que por orden de pintado taparia a los
     desplegables. Con esto la cabecera entera queda por encima. */
  position:relative;
  z-index:100;
}

.pkp_head_wrapper{
  padding-top:1.15rem;
  padding-bottom:1rem;
}

/* --- Composición de la cabecera en escritorio ---------------------

   Estructura real del tema (OJS 3.4):

     .pkp_head_wrapper
       ├── .pkp_site_name_wrapper        → contenedor centrado propio
       │     └── .pkp_site_name          → el nombre de la revista
       └── nav.pkp_site_nav_menu
             ├── .pkp_navigation_primary_row     → barra morada
             │     └── .pkp_navigation_primary_wrapper  (centrado propio)
             └── .pkp_navigation_user_wrapper    → contenedor centrado propio
                   └── ul.pkp_navigation_user    → "admin"

   El menu de usuario NO es hermano del titulo: cuelga del <nav> y va
   DESPUES de la barra. Ademas, el titulo y el menu de usuario tienen
   cada uno su propio contenedor centrado, asi que no pueden compartir
   linea reordenandolos con flex — al ponerlos juntos, los dos anchos
   maximos compiten y se descuadra todo.

   El tema YA resuelve la alineacion horizontal, y lo hace bien:

     .pkp_navigation_user_wrapper{ position:absolute; top:0;
                                   left:50%; transform:translateX(-50%) }
     ul.pkp_navigation_user      { width:1160px; text-align:right }

   es decir, la caja absoluta se centra y el <ul> de dentro mide
   exactamente lo mismo que la rejilla del contenido, con el texto
   pegado a su borde derecho: la misma vertical que BUSCAR.

   Por defecto el tema lo coloca ARRIBA del nombre (top:0, con
   padding-top:4.286rem en la cabecera para dejarle sitio). Lo unico
   que hace falta es bajarlo a la linea del titulo. Nada de left,
   right, width ni transform: tocarlos rompe el centrado.
   ------------------------------------------------------------------ */
@media (min-width:992px){

  /* Reserva a la derecha del nombre para que un titulo largo no
     se cruce con el menu de usuario */
  .pkp_head_wrapper .pkp_site_name{ padding-right:11rem; }

  .pkp_navigation_user_wrapper{
    /* AJUSTE FINO: si "admin" queda alto o bajo respecto al titulo,
       este es el unico numero que hay que mover. */
    top:1.63rem;
  }

  /* En movil este contenedor es el panel desplegable y va en azul OJS;
     en escritorio no debe pintar nada */
  .pkp_site_nav_menu{ background:transparent; padding:0; }
}

.pkp_site_name .is_img img{
  max-height:78px;
  width:auto;
  max-width:100%;
}

.pkp_site_name a,
.pkp_site_name .is_text{
  font-family:Montserrat,sans-serif;
  color:var(--bt-plum);
  font-weight:700;
  font-size:1.5rem;
  line-height:1.18;
  text-decoration:none;
  display:inline-block;
  /* El nombre lleva el ISSN pegado: que parta bien en pantallas medias */
  overflow-wrap:break-word;
}
.pkp_site_name a:hover{ color:var(--bt-purple); }

/* Menú de usuario: discreto, alineado a la derecha.

   OJO: aquí NO se toca display, width, margin ni padding.
   El <ul>.pkp_navigation_user es uno de los contenedores de rejilla
   del tema (comparte regla con .pkp_structure_content y compañía:
   width 952px / 1160px, margin 0 auto). Si se convierte en
   inline-flex pierde ese ancho, se encoge al tamaño del texto y el
   text-align:right del tema deja de tener contra qué alinear. */
.pkp_navigation_user{
  list-style:none;
}
.pkp_navigation_user > li > a{
  color:var(--bt-ink-3);
  font-size:.83rem;
  font-weight:600;
  /* 1rem de sangria derecha = el mismo hueco que deja BUSCAR
     (margin .5em + padding .5em) respecto al borde de la rejilla */
  padding:.4rem 1rem;
  border-radius:var(--bt-radius);
}
/* El tema saca el ultimo enlace 0.714rem fuera de la rejilla; eso
   descuadraba "admin" respecto a BUSCAR */
.pkp_navigation_user > li:last-child > a{ margin-right:0; }
.pkp_navigation_user > li > a:hover{
  color:var(--bt-purple);
  background:var(--bt-lavender);
  text-decoration:none;
}

/* Desplegable del menú de usuario: mismo lenguaje que el del menú principal.
   Es un elemento aparte y conserva el azul del tema si no se cubre. */
.pkp_navigation_user ul{
  background:var(--bt-paper);
  border:0 !important;
  border-top:3px solid var(--bt-orange) !important;
  border-right:1px solid var(--bt-line) !important;
  border-bottom:1px solid var(--bt-line) !important;
  border-left:1px solid var(--bt-line) !important;
  border-radius:0 0 var(--bt-radius) var(--bt-radius);
  box-shadow:0 10px 28px -12px rgba(74,37,87,.45);
  padding:.35rem 0;
  min-width:212px;
  z-index:70;
}
.pkp_navigation_user ul::before,
.pkp_navigation_user ul::after{ display:none !important; }

.pkp_navigation_user ul li{ display:block; }

.pkp_navigation_user ul li a,
.pkp_navigation_user ul li a:link,
.pkp_navigation_user ul li a:visited{
  display:block;
  font-family:"Source Sans 3",sans-serif;
  font-size:.92rem;
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  color:var(--bt-ink-2) !important;
  background:transparent !important;
  padding:.55rem 1.1rem;
  border-left:3px solid transparent !important;
  border-radius:0;
}
.pkp_navigation_user ul li a:hover,
.pkp_navigation_user ul li a:focus,
.pkp_navigation_user ul li a:focus-visible{
  background:var(--bt-lavender) !important;
  color:var(--bt-plum) !important;
  border-left:3px solid var(--bt-orange) !important;
  text-decoration:none;
}

/* "Salir" separado del resto: es la acción destructiva del grupo */
.pkp_navigation_user ul li:last-child a{
  border-top:1px solid var(--bt-line-soft);
  margin-top:.25rem;
  padding-top:.6rem;
}

/* --- Barra de navegación ---

   El color va en .pkp_navigation_primary_row, que ya ocupa todo el
   ancho de la cabecera. No hace falta ningun truco de sangrado.

   Antes estaba en .pkp_navigation_primary_wrapper (el contenedor
   centrado) con `box-shadow: 0 0 0 100vmax` + `clip-path: inset(0 -100vmax)`
   para desbordarlo a los lados. El problema: `clip-path` recorta a TODOS
   sus descendientes, y verticalmente `inset(0 ...)` recorta justo a la
   altura de la barra. Por eso el desplegable de ACERCA DE se veia
   cortado bajo la imagen: no estaba detras, estaba recortado. */
.pkp_navigation_primary_row{
  background:var(--bt-plum);
  border-bottom:3px solid var(--bt-orange);
  position:relative;
}

.pkp_navigation_primary_wrapper{
  background:transparent;
  position:relative;
}

.pkp_navigation_primary{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  margin:0;
  padding:0;
  list-style:none;
}

.pkp_navigation_primary > li{ position:relative; }

.pkp_navigation_primary > li > a{
  display:flex;
  align-items:center;
  font-family:Montserrat,sans-serif;
  font-weight:600;
  font-size:.83rem;
  letter-spacing:.045em;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
  padding:.95rem 1.05rem;
  border-radius:0;
  border-bottom:3px solid transparent;
  margin-bottom:-3px;
  text-decoration:none;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}

.pkp_navigation_primary > li > a:hover{
  background:rgba(255,255,255,.12);
  color:#fff;
  border-bottom-color:rgba(255,255,255,.55);
  text-decoration:none;
}

.pkp_navigation_primary > li > a:focus-visible{
  outline:2px solid var(--bt-gold);
  outline-offset:-4px;
  box-shadow:none;
  background:rgba(255,255,255,.12);
  color:#fff;
}

/* Página actual: subrayado naranja, el acento propio de la revista */
.pkp_navigation_primary > li.current > a,
.pkp_navigation_primary > li[aria-current] > a,
.pkp_navigation_primary > li > a[aria-current]{
  background:rgba(255,255,255,.10);
  color:#fff;
  border-bottom-color:var(--bt-orange);
}

/* Flecha de los desplegables */
.pkp_navigation_primary > li.has-submenu > a::after,
.pkp_navigation_primary > li > a.dropdown-toggle::after{
  content:"";
  width:.42em; height:.42em;
  margin-left:.5em;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  opacity:.85;
}

/* Submenús */
.pkp_navigation_primary ul{
  background:var(--bt-paper);
  /* El tema por defecto pinta un borde azul en un lado.
     Se apagan los cuatro y se declaran de nuevo. */
  border:0 !important;
  border-top:3px solid var(--bt-orange) !important;
  border-right:1px solid var(--bt-line) !important;
  border-bottom:1px solid var(--bt-line) !important;
  border-left:1px solid var(--bt-line) !important;
  outline:none;
  border-radius:0 0 var(--bt-radius) var(--bt-radius);
  box-shadow:0 10px 28px -12px rgba(74,37,87,.45);
  padding:.35rem 0;
  min-width:236px;
  z-index:60;
}
/* Por si el azul viniera de un pseudoelemento del tema */
.pkp_navigation_primary ul::before,
.pkp_navigation_primary ul::after{ display:none !important; }
.pkp_navigation_primary ul li{ display:block; }
.pkp_navigation_primary ul a{
  display:block;
  color:var(--bt-ink-2);
  font-family:"Source Sans 3",sans-serif;
  font-size:.92rem;
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  padding:.55rem 1.1rem;
  border-left:3px solid transparent;
}
/* El tema declara el atajo `border-left` en el hover, y un atajo gana
   siempre a una propiedad suelta. Hay que responder con otro atajo. */
.pkp_navigation_primary ul li a,
.pkp_navigation_primary ul li a:link,
.pkp_navigation_primary ul li a:visited{
  border-left:3px solid transparent !important;
}
.pkp_navigation_primary ul li a:hover,
.pkp_navigation_primary ul li a:focus,
.pkp_navigation_primary ul li a:focus-visible{
  background:var(--bt-lavender) !important;
  color:var(--bt-plum) !important;
  border-left:3px solid var(--bt-orange) !important;
  text-decoration:none;
}

/* --- Buscador: en la misma fila del menú, al extremo derecho --- */
/* El buscador es hermano de la lista, no parte de ella: se convierte
   el contenedor en flex para que compartan renglón. */
.pkp_navigation_primary_wrapper{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
}
.pkp_navigation_primary{ flex:1 1 auto; }

.pkp_navigation_search_wrapper{
  flex:0 0 auto;
  margin-left:auto;
  display:flex;
  align-items:center;
}
.pkp_search input[type="search"],
.pkp_navigation_search_wrapper input[type="search"]{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  border-radius:20px;
  padding:.4rem .9rem;
}
.pkp_search input[type="search"]::placeholder{ color:rgba(255,255,255,.7); }
.pkp_search input[type="search"]:focus{
  background:rgba(255,255,255,.22);
  border-color:var(--bt-gold);
  box-shadow:none;
  outline:none;
}
.pkp_navigation_search_wrapper a,
.pkp_search_toggle{
  color:rgba(255,255,255,.92);
  font-family:Montserrat,sans-serif;
  font-size:.83rem;
  font-weight:600;
  letter-spacing:.045em;
  text-transform:uppercase;
  padding:.95rem 1.05rem;
  display:flex;
  align-items:center;
  gap:.4rem;
}
.pkp_navigation_search_wrapper a:hover{
  background:rgba(255,255,255,.12);
  color:#fff;
  text-decoration:none;
}

/* --- Navegación en móvil --- */
@media (max-width:991px){

  /* CABECERA COMPACTA: hamburguesa a la izquierda, nombre al lado.

     El tema dibuja el icono en blanco (`border-bottom:3px solid #fff`
     y `background:#fff` en los pseudoelementos) porque su cabecera
     movil es azul OJS. La nuestra es clara: el boton estaba ahi, pero
     era blanco sobre blanco. Aqui se repinta en morado. */
  .pkp_head_wrapper{ padding-top:.55rem; padding-bottom:.55rem; }

  .pkp_site_name_wrapper{
    height:auto;              /* el tema lo fija en 2.857rem */
    min-height:2.9rem;
    display:flex;
    align-items:center;
    padding-left:3.1rem;      /* hueco reservado a la hamburguesa */
    padding-right:.8rem;
  }

  .pkp_site_name{
    position:static;          /* el tema lo posiciona en absoluto */
    left:auto; right:auto;
    width:100%;
    padding:0;
    white-space:normal;
    overflow:visible;
  }
  .pkp_site_name a,
  .pkp_site_name .is_text{
    display:block;
    padding:0;
    font-size:1.02rem;
    line-height:1.24;
  }
  .pkp_site_name .is_img img{ max-height:44px; }

  .pkp_site_nav_toggle{
    top:50%;
    left:.3rem;
    transform:translateY(-50%);
    width:2.5rem;
    height:2.5rem;
    background:transparent;
    box-shadow:none;          /* el tema pinta dos filetes blancos */
    border-radius:var(--bt-radius);
    cursor:pointer;
  }
  .pkp_site_nav_toggle:hover{ background:var(--bt-lavender); }
  .pkp_site_nav_toggle:focus-visible{
    outline:2px solid var(--bt-orange);
    outline-offset:2px;
    box-shadow:none;
  }
  /* Las tres barras del icono */
  .pkp_site_nav_toggle > span{ border-bottom-color:var(--bt-plum); }
  .pkp_site_nav_toggle > span::before,
  .pkp_site_nav_toggle > span::after{ background:var(--bt-plum); }
  /* Estado abierto: el tema lo convierte en aspa */
  .pkp_site_nav_toggle--transform > span::before,
  .pkp_site_nav_toggle--transform > span::after{ background:var(--bt-plum); }

  /* En movil este contenedor ES el panel desplegable, y el tema lo
     pinta de azul OJS alrededor de la barra.
     Sin tocar `display`: lo abre y lo cierra el JS del tema. */
  .pkp_site_nav_menu{
    background:var(--bt-plum);
    padding:0;
    border-top:3px solid var(--bt-orange);
    box-shadow:0 14px 28px -14px rgba(74,37,87,.55);
  }

  /* Dentro del panel, la barra deja de ser barra: sin fondo propio ni
     filete naranja, que ahi partiria el panel por la mitad */
  .pkp_navigation_primary_row{ background:transparent; border-bottom:0; }

  .pkp_navigation_primary_wrapper{ display:block; }
  .pkp_navigation_primary{ flex-direction:column; }
  .pkp_navigation_primary > li{ width:100%; }
  .pkp_navigation_primary > li > a{
    padding:.85rem 1rem;
    border-bottom:1px solid rgba(255,255,255,.14);
    border-left:3px solid transparent;
    margin-bottom:0;
  }
  .pkp_navigation_primary > li > a:hover,
  .pkp_navigation_primary > li.current > a{
    border-bottom-color:rgba(255,255,255,.14);
    border-left-color:var(--bt-orange);
  }
  /* Los submenus de escritorio se declaran con !important (hay que
     ganarle al atajo `border-left` del tema). Aqui, dentro del panel,
     sobran: se apagan tambien con !important. */
  .pkp_navigation_primary ul,
  .pkp_navigation_user ul{
    position:static;
    box-shadow:none !important;
    border:0 !important;
    border-radius:0 !important;
    background:rgba(0,0,0,.18);
    padding:0;
    min-width:0;
    width:auto;
  }
  /* Los enlaces del desplegable de usuario se declaran en escritorio
     como `.pkp_navigation_user ul li a { color:... !important }`.
     Sobre la banda clara eso es correcto; sobre el panel morado del
     movil queda gris sobre gris. Hay que igualar `ul li a` — con
     :link y :visited, que el tema tambien declara — y volver a usar
     !important, si no gana la regla de escritorio. */
  .pkp_navigation_primary ul li a,
  .pkp_navigation_primary ul li a:link,
  .pkp_navigation_primary ul li a:visited,
  .pkp_navigation_user ul li a,
  .pkp_navigation_user ul li a:link,
  .pkp_navigation_user ul li a:visited{
    color:rgba(255,255,255,.88) !important;
    background:transparent !important;
    padding-left:2.2rem;
    border-left:0 !important;
  }
  .pkp_navigation_primary ul li a:hover,
  .pkp_navigation_primary ul li a:focus,
  .pkp_navigation_primary ul li a:focus-visible,
  .pkp_navigation_user ul li a:hover,
  .pkp_navigation_user ul li a:focus,
  .pkp_navigation_user ul li a:focus-visible{
    background:rgba(255,255,255,.12) !important;
    color:#fff !important;
    border-left:0 !important;
  }

  /* El separador de "Salir" es una linea clara pensada para fondo blanco */
  .pkp_navigation_user ul li:last-child a{
    border-top:1px solid rgba(255,255,255,.18);
  }

  /* El contador de tareas junto a "Panel de control" */
  .pkp_navigation_user .task_count{
    background:rgba(255,255,255,.18);
    color:#fff;
  }

  /* Menu de usuario dentro del panel: mismo tratamiento que el resto.
     En escritorio va en gris sobre banda clara; aqui el fondo es morado. */
  .pkp_navigation_user_wrapper{ margin-top:0; padding-top:0; border-top:0; }
  /* El tema lo separa con `.pkp_navigation_user.pkp_navigation_user`,
     doble clase: hay que igualar esa especificidad */
  .pkp_navigation_user.pkp_navigation_user{
    margin-top:0; padding-top:0; border-top:0; padding-right:0;
    /* misma sangria izquierda que el menu principal y BUSCAR */
    padding-left:.714rem;
  }
  .pkp_navigation_user > li{ display:block; width:100%; }
  .pkp_navigation_user > li > a{
    display:block;
    color:rgba(255,255,255,.92);
    font-family:Montserrat,sans-serif;
    font-size:.83rem;
    letter-spacing:.045em;
    text-transform:uppercase;
    padding:.85rem 1rem;
    border-radius:0;
    border-bottom:1px solid rgba(255,255,255,.14);
    border-left:3px solid transparent;
  }
  .pkp_navigation_user > li > a:hover{
    background:rgba(255,255,255,.10);
    color:#fff;
    border-left-color:var(--bt-orange);
  }

  .pkp_navigation_search_wrapper{
    margin-left:0;
    width:100%;
    margin-top:0;
    padding-top:0;
    border-top:0;
  }
  .pkp_navigation_search_wrapper a{ padding:.85rem 1rem; }
}

/* Migas de pan */
.cmp_breadcrumbs{
  font-size:.85rem;
  color:var(--bt-ink-3);
  padding:.85rem 0 .4rem;
}
.cmp_breadcrumbs a{ color:var(--bt-purple-mid); }
.cmp_breadcrumbs a:hover{ color:var(--bt-plum); }

/* ============================================================
   3. BOTONES — todos los estados
   ============================================================ */

.cmp_button,
.pkp_button,
button.pkp_button,
a.cmp_button,
.obj_galley_link,
input[type="submit"]{
  font-family:Montserrat,sans-serif;
  font-weight:600;
  font-size:.88rem;
  letter-spacing:.01em;
  background:var(--bt-purple);
  color:#fff;
  border:1px solid var(--bt-purple);
  border-radius:var(--bt-radius);
  padding:.55rem 1.1rem;
  text-decoration:none;
  display:inline-block;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease,
             transform .08s ease, box-shadow .15s ease;
}
.cmp_button:hover,
.pkp_button:hover,
a.cmp_button:hover,
.obj_galley_link:hover,
input[type="submit"]:hover{
  background:var(--bt-plum);
  border-color:var(--bt-plum);
  color:#fff;
  text-decoration:none;
}
.cmp_button:active,
.pkp_button:active,
a.cmp_button:active,
.obj_galley_link:active{ transform:translateY(1px); }

.cmp_button:disabled,
.pkp_button:disabled,
button[disabled]{
  background:var(--bt-purple-soft);
  border-color:var(--bt-purple-soft);
  color:#fff;
  cursor:not-allowed;
  opacity:.7;
  transform:none;
}

/* Botón de llamada a la acción, en dorado institucional.
   Reservado para "Enviar un artículo": si todo destaca, nada destaca. */
.block_make_submission a,
.cmp_button.is_primary{
  background:var(--bt-gold);
  border-color:var(--bt-gold);
  color:var(--bt-plum);
  font-weight:700;
  width:100%;
  text-align:center;
}
.block_make_submission a:hover,
.cmp_button.is_primary:hover{
  background:var(--bt-gold-dark);
  border-color:var(--bt-gold-dark);
  color:var(--bt-plum);
}

/* Enlaces a galeradas (PDF): que se lean como botón secundario */
.obj_galley_link{
  background:transparent;
  color:var(--bt-purple);
  border:1.5px solid var(--bt-purple-soft);
  font-size:.82rem;
  padding:.35rem .8rem;
}
.obj_galley_link:hover{
  background:var(--bt-purple);
  border-color:var(--bt-purple);
  color:#fff;
}

/* ============================================================
   4. BLOQUES DE LA BARRA LATERAL
   ============================================================ */

.pkp_structure_sidebar .pkp_block{
  background:var(--bt-paper);
  border:1px solid var(--bt-line);
  border-radius:var(--bt-radius);
  padding:1rem 1.1rem;
  margin-bottom:1.1rem;
  box-shadow:var(--bt-shadow);
}

.pkp_block .title{
  font-family:Montserrat,sans-serif;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--bt-purple);
  padding-bottom:.55rem;
  margin-bottom:.75rem;
  border-bottom:2px solid var(--bt-lavender);
}

.pkp_block ul{ list-style:none; padding-left:0; margin:0; }
.pkp_block li{ padding:.3rem 0; }
.pkp_block a{ color:var(--bt-ink-2); }
.pkp_block a:hover{ color:var(--bt-purple); }

/* Cualquier imagen dentro de un bloque: contenida, sin desbordar */
.pkp_block img{
  max-width:100%;
  height:auto;
  display:block;
  margin:.4rem auto;
  border-radius:4px;
}

/* ============================================================
   BLOQUES DE LA BARRA LATERAL

   OJS filtra el HTML de los bloques personalizados con esta lista
   blanca (config.inc.php → allowed_html):

     a[href|target|title], em, strong, cite, code, ul, ol,
     li[class], dl, dt, dd, b, i, u, img[src|alt], sup, sub, br, p

   Consecuencias: <div>, <span> y <svg> se eliminan enteros, y el
   atributo `class` solo sobrevive en <li>. Por eso los iconos no
   pueden ir en el HTML: van aquí, como imagen de fondo del
   pseudoelemento ::before de cada <li>.
   ============================================================ */

/* La lista se reconoce por sus hijos, porque al <ul> no se le puede
   poner clase */
.pkp_block ul:has(> li[class*="bt-"]){
  list-style:none;
  margin:0;
  padding-left:0;
}

/* El icono es una CAJA FLEXIBLE, no un pseudoelemento posicionado en
   absoluto. Con `position:absolute` el hueco lo tiene que abrir un
   `padding-left` del <li>, y basta con que otra hoja reponga el
   padding para que el icono se monte encima del texto. Con flex el
   hueco lo crea el propio icono: no depende de nada. */
.pkp_block li[class*="bt-"]{
  list-style:none;
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  padding:.42rem 0;
  line-height:1.42;
  font-size:.93rem;
}
.pkp_block li[class*="bt-"]::before{
  content:"";
  flex:0 0 1.15rem;
  margin-top:.14rem;
  width:1.15rem;
  height:1.15rem;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
.pkp_block li[class*="bt-"] > a{
  color:var(--bt-ink-2);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.pkp_block li[class*="bt-"] > a:hover,
.pkp_block li[class*="bt-"] > a:focus-visible{
  color:var(--bt-purple);
  border-bottom-color:var(--bt-orange);
}

.pkp_block li.bt-scholar::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%236B3A80%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%202%201%208.5l11%206.5%2011-6.5L12%202z%27%2F%3E%3Cpath%20d%3D%27M5.5%2011.6v4.1c0%202.3%202.9%204.2%206.5%204.2s6.5-1.9%206.5-4.2v-4.1%27%2F%3E%3C%2Fsvg%3E"); }
.pkp_block li.bt-crossref::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%236B3A80%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M10.6%2013.4a4%204%200%200%201%200-5.7l2.8-2.8a4%204%200%200%201%205.7%205.7l-1.4%201.4%27%2F%3E%3Cpath%20d%3D%27M13.4%2010.6a4%204%200%200%201%200%205.7l-2.8%202.8a4%204%200%200%201-5.7-5.7l1.4-1.4%27%2F%3E%3C%2Fsvg%3E"); }
.pkp_block li.bt-abierto::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%236B3A80%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%2710.5%27%20width%3D%2716%27%20height%3D%2711%27%20rx%3D%272.2%27%2F%3E%3Cpath%20d%3D%27M8%2010.5V7a4%204%200%200%201%207.6-1.7%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2716%27%20r%3D%271.3%27%2F%3E%3C%2Fsvg%3E"); }
.pkp_block li.bt-latindex::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%236B3A80%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M3%2012h18%27%2F%3E%3Cpath%20d%3D%27M12%203a15%2015%200%200%201%200%2018a15%2015%200%200%201%200-18z%27%2F%3E%3C%2Fsvg%3E"); }
.pkp_block li.bt-plantilla::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%236B3A80%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14%202H6.8A1.8%201.8%200%200%200%205%203.8v16.4A1.8%201.8%200%200%200%206.8%2022h10.4a1.8%201.8%200%200%200%201.8-1.8V7z%27%2F%3E%3Cpath%20d%3D%27M14%202v5h5%27%2F%3E%3Cpath%20d%3D%27M12%2011v6M9.5%2014.5%2012%2017l2.5-2.5%27%2F%3E%3C%2Fsvg%3E"); }
.pkp_block li.bt-carta::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%236B3A80%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14%202H6.8A1.8%201.8%200%200%200%205%203.8v16.4A1.8%201.8%200%200%200%206.8%2022h10.4a1.8%201.8%200%200%200%201.8-1.8V7z%27%2F%3E%3Cpath%20d%3D%27M14%202v5h5M8.5%2013h7M8.5%2017h4%27%2F%3E%3C%2Fsvg%3E"); }
.pkp_block li.bt-guia::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%236B3A80%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20.5%2012a8.5%208.5%200%201%201-17%200%208.5%208.5%200%200%201%2017%200z%27%2F%3E%3Cpath%20d%3D%27M9%2011.5%2011%2013.5l4.5-4.5%27%2F%3E%3C%2Fsvg%3E"); }
.pkp_block li.bt-lugar::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%236B3A80%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%2010.5c0%205.5-8%2012-8%2012s-8-6.5-8-12a8%208%200%200%201%2016%200z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2710.5%27%20r%3D%272.8%27%2F%3E%3C%2Fsvg%3E"); }
.pkp_block li.bt-correo::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%236B3A80%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272.5%27%20y%3D%274.5%27%20width%3D%2719%27%20height%3D%2715%27%20rx%3D%272.2%27%2F%3E%3Cpath%20d%3D%27m3%206.5%209%206.5%209-6.5%27%2F%3E%3C%2Fsvg%3E"); }
.pkp_block li.bt-telefono::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%236B3A80%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2016.9v2.6a1.8%201.8%200%200%201-2%201.8%2017.6%2017.6%200%200%201-7.7-2.7%2017.3%2017.3%200%200%201-5.3-5.3A17.6%2017.6%200%200%201%203.3%205.6%201.8%201.8%200%200%201%205.1%203.6h2.6a1.8%201.8%200%200%201%201.8%201.6c.1.9.3%201.7.6%202.5a1.8%201.8%200%200%201-.4%201.9l-1.1%201.1a14%2014%200%200%200%205.3%205.3l1.1-1.1a1.8%201.8%200%200%201%201.9-.4c.8.3%201.6.5%202.5.6a1.8%201.8%200%200%201%201.6%201.8z%27%2F%3E%3C%2Fsvg%3E"); }
.pkp_block li.bt-web::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%236B3A80%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2019.5V6a2%202%200%200%201%202-2h13v16H6.5A2.5%202.5%200%200%200%204%2022.5z%27%2F%3E%3Cpath%20d%3D%27M8%208h7M8%2011.5h7%27%2F%3E%3C%2Fsvg%3E"); }
.pkp_block li.bt-aviso::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%236B3A80%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2011v2a1%201%200%200%200%201%201h2l5%204V6L6%2010H4a1%201%200%200%200-1%201z%27%2F%3E%3Cpath%20d%3D%27M16%208.5a4.5%204.5%200%200%201%200%207M18.8%205.7a8.5%208.5%200%200%201%200%2012.6%27%2F%3E%3C%2Fsvg%3E"); }

/* --- Logotipos de indexación --------------------------------------
   Los logos de Crossref, Latindex, DOAJ y compañía son marcas
   registradas: no se dibujan, se usa el archivo oficial de cada
   organismo. `img[src|alt]` SÍ está en la lista blanca de OJS, así
   que basta con subir el archivo y enlazarlo.

     <li class="bt-logo"><a href="…"><img src="…" alt="Latindex"></a></li>

   Los logos vienen en proporciones muy distintas (Crossref es casi
   cuadrado, Latindex muy apaisado). Se normalizan por ALTURA, que es
   lo que hace que una fila de logos se vea ordenada.
   ------------------------------------------------------------------ */
.pkp_block ul:has(> li.bt-logo){
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:1rem .95rem;
  margin:.35rem 0 .1rem;
}
/* `ul li` en vez de `li` para ganarle tambien a la regla de movil,
   que reajusta el padding vertical de los items con icono */
.pkp_block ul li.bt-logo{
  display:block;
  flex:0 0 auto;
  padding:0;
  margin:0;
  line-height:0;      /* si no, el <li> reserva alto de linea de texto */
  max-width:100%;
}
.pkp_block li.bt-logo::before{ content:none; }
.pkp_block ul li.bt-logo > a{
  display:block;
  padding:0;            /* la regla tactil de movil pone .35rem */
  min-height:0;         /* ...y 32px de alto minimo */
  line-height:0;
  border-bottom:none;
  transition:transform .14s ease;
}
.pkp_block li.bt-logo > a:hover,
.pkp_block li.bt-logo > a:focus-visible{
  border-bottom:none;
  transform:translateY(-2px);
}
.pkp_block li.bt-logo img{
  display:block;
  height:32px;              /* altura común: ordena la fila */
  width:auto;
  max-width:138px;
  object-fit:contain;
  margin:0;
  border-radius:0;
}
/* Logos apaisados (Latindex, REDIB…): más ancho, misma altura óptica */
.pkp_block li.bt-logo-ancho img{ height:26px; max-width:170px; }
/* Logos altos o cuadrados */
.pkp_block li.bt-logo-alto img{ height:40px; max-width:100px; }

/* Imagen a todo el ancho del bloque: botones de descarga, banners
   pequeños. A diferencia de los logos, aquí manda el ancho. */
.pkp_block ul:has(> li.bt-imagen){ display:block; }
.pkp_block ul li.bt-imagen{
  display:block;
  padding:0;
  margin:0 0 .55rem;
  line-height:0;
  max-width:100%;
}
.pkp_block ul li.bt-imagen:last-child{ margin-bottom:0; }
.pkp_block li.bt-imagen::before{ content:none; }
.pkp_block ul li.bt-imagen > a{
  display:block;
  padding:0;
  min-height:0;
  line-height:0;
  border-bottom:none;
  border-radius:var(--bt-radius);
  overflow:hidden;
  transition:box-shadow .15s ease, transform .14s ease;
}
.pkp_block ul li.bt-imagen > a:hover,
.pkp_block ul li.bt-imagen > a:focus-visible{
  border-bottom:none;
  transform:translateY(-2px);
  box-shadow:0 6px 18px -8px rgba(74,37,87,.45);
}
.pkp_block li.bt-imagen img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  margin:0;
  border-radius:var(--bt-radius);
}

/* ============================================================
   BOTÓN FLOTANTE DE WHATSAPP

   Va en Ajustes > Sitio web > Apariencia > Pie de página, el unico
   campo que OJS imprime en TODAS las paginas y que acepta HTML.

   NO depende de que sobreviva ninguna `class`: el estilo se ancla al
   propio enlace por su href, que OJS conserva siempre. Da igual si el
   filtro deja <li class="...">, un <li> pelado o un <p>.

   Se limita al pie para que un enlace de WhatsApp en la barra
   lateral siga comportandose como un enlace normal.
   ============================================================ */

/* --- CASO 1: lista (uno o varios botones, se apilan solos) --------
   Flota el <ul>, no cada enlace. Asi no hay que numerar nada:
   añade otro <li> y se coloca encima del anterior. */
.pkp_structure_footer_wrapper ul:has(> li > a[href*="wa.me/"]),
.pkp_structure_footer_wrapper ul:has(> li > a[href*="api.whatsapp.com"]){
  position:fixed;
  right:1.15rem;
  bottom:1.15rem;
  z-index:1200;                /* la cabecera esta en 100 */
  display:flex;
  flex-direction:column-reverse;
  gap:.75rem;
  margin:0;
  padding:0;
  list-style:none;
  width:auto;
}
.pkp_structure_footer_wrapper ul:has(> li > a[href*="wa.me/"]) > li,
.pkp_structure_footer_wrapper ul:has(> li > a[href*="api.whatsapp.com"]) > li{
  display:block;
  margin:0;
  padding:0;
  line-height:0;
  list-style:none;
}

/* --- CASO 2: el enlace suelto dentro de un parrafo ---------------- */
.pkp_structure_footer_wrapper p > a[href*="wa.me/"],
.pkp_structure_footer_wrapper p > a[href*="api.whatsapp.com"]{
  position:fixed;
  right:1.15rem;
  bottom:1.15rem;
  z-index:1200;
}
/* El renglon vacio que dejaria ese parrafo en el pie */
.pkp_structure_footer_wrapper p:has(> a[href*="wa.me/"]),
.pkp_structure_footer_wrapper p:has(> a[href*="api.whatsapp.com"]){
  height:0;
  margin:0;
  padding:0;
  line-height:0;
}

/* --- Aspecto del boton, comun a los dos casos --------------------
   El circulo y el glifo se dibujan aqui: no hace falta subir ninguna
   imagen y se ve nitido en cualquier pantalla. Si el enlace SI lleva
   un <img>, la imagen lo tapa y manda ella. */
.pkp_structure_footer_wrapper a[href*="wa.me/"],
.pkp_structure_footer_wrapper a[href*="api.whatsapp.com"]{
  display:block;
  width:58px;
  height:58px;
  padding:0;
  border:none;
  border-radius:50%;
  overflow:hidden;
  /* Para el verde de WhatsApp, cambia var(--bt-plum) por #25D366 */
  background-color:var(--bt-plum);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27%23ffffff%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%200%200-8.6%2015.1L2%2022.2l5.3-1.4A10%2010%200%201%200%2012%202zm0%201.8a8.2%208.2%200%201%201-4.2%2015.2l-.3-.2-3.1.8.8-3-.2-.3A8.2%208.2%200%200%201%2012%203.8z%27%2F%3E%3Cpath%20d%3D%27M9.4%207.3c-.2-.5-.4-.5-.6-.5h-.5c-.2%200-.5.1-.8.4-.3.3-1%201-1%202.4s1%202.8%201.2%203c.1.2%202%203.2%205%204.4.7.3%201.2.5%201.7.6.7.2%201.3.2%201.8.1.6-.1%201.7-.7%201.9-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3-.3-.2-1.7-.9-1.9-1-.3-.1-.5-.1-.6.1-.2.3-.7.9-.9%201.1-.2.2-.3.2-.6.1-.3-.1-1.2-.5-2.2-1.4-.8-.7-1.4-1.6-1.5-1.9-.2-.3%200-.4.1-.6l.4-.5c.1-.1.2-.3.2-.4s0-.3-.1-.5c0-.1-.6-1.5-.8-2z%27%2F%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:56%;
  box-shadow:0 6px 18px -4px rgba(0,0,0,.34), 0 2px 6px rgba(0,0,0,.16);
  transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease;
  /* Oculta el texto del enlace sin sacarlo del arbol de accesibilidad */
  font-size:0;
  line-height:0;
  color:transparent;
}
.pkp_structure_footer_wrapper a[href*="wa.me/"]:hover,
.pkp_structure_footer_wrapper a[href*="api.whatsapp.com"]:hover{
  background-color:var(--bt-purple);
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 12px 26px -6px rgba(0,0,0,.4), 0 3px 8px rgba(0,0,0,.18);
}
.pkp_structure_footer_wrapper a[href*="wa.me/"]:focus-visible,
.pkp_structure_footer_wrapper a[href*="api.whatsapp.com"]:focus-visible{
  outline:3px solid var(--bt-orange);
  outline-offset:3px;
}
.pkp_structure_footer_wrapper a[href*="wa.me/"] img,
.pkp_structure_footer_wrapper a[href*="api.whatsapp.com"] img{
  display:block;
  width:100%;
  height:100%;
  margin:0;
  object-fit:cover;
  border-radius:50%;
}

@media (max-width:767px){
  .pkp_structure_footer_wrapper ul:has(> li > a[href*="wa.me/"]),
  .pkp_structure_footer_wrapper ul:has(> li > a[href*="api.whatsapp.com"]),
  .pkp_structure_footer_wrapper p > a[href*="wa.me/"],
  .pkp_structure_footer_wrapper p > a[href*="api.whatsapp.com"]{
    right:.85rem;
    bottom:.85rem;
  }
  .pkp_structure_footer_wrapper a[href*="wa.me/"],
  .pkp_structure_footer_wrapper a[href*="api.whatsapp.com"]{
    width:52px;
    height:52px;
  }
}

@media print{
  .pkp_structure_footer_wrapper a[href*="wa.me/"],
  .pkp_structure_footer_wrapper a[href*="api.whatsapp.com"]{ display:none !important; }
}

/* Fila de iconos sociales: WhatsApp, Facebook, etc.
   OJS elimina width y height de las <img>, así que el tamaño tiene
   que fijarse aquí o cada icono sale con su tamaño original. */
.pkp_block ul:has(> li.bt-social){
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.9rem;
  margin:.5rem 0 .2rem;
}
.pkp_block ul li.bt-social{
  display:block;
  flex:0 0 auto;
  padding:0;
  margin:0;
  line-height:0;
}
.pkp_block li.bt-social::before{ content:none; }
.pkp_block ul li.bt-social > a{
  display:block;
  padding:0;
  min-height:0;
  line-height:0;
  border-bottom:none;
  border-radius:50%;
  transition:transform .14s ease, box-shadow .15s ease;
}
.pkp_block ul li.bt-social > a:hover,
.pkp_block ul li.bt-social > a:focus-visible{
  border-bottom:none;
  transform:translateY(-2px);
  box-shadow:0 6px 16px -8px rgba(74,37,87,.5);
}
.pkp_block li.bt-social img{
  display:block;
  width:40px;
  height:40px;
  max-width:none;
  margin:0;
  object-fit:contain;
  border-radius:0;
}

/* Número o dato destacado dentro de un bloque */
.pkp_block p.bt-dato,
.pkp_block li.bt-dato{
  display:block;
  text-align:center;
  font-family:Montserrat,sans-serif;
  font-size:1.12rem;
  font-weight:700;
  letter-spacing:.01em;
  padding:.1rem 0;
}
.pkp_block li.bt-dato::before{ content:none; }
.pkp_block li.bt-dato > a,
.pkp_block li.bt-dato > a:link{
  color:var(--bt-plum);
  text-decoration:none;
  border-bottom:none;
}
.pkp_block li.bt-dato > a:hover,
.pkp_block li.bt-dato > a:focus-visible{
  color:var(--bt-orange-dk);
  border-bottom:none;
  text-decoration:underline;
}

/* Widget externo de tamaño fijo (contador de visitas, sellos de
   terceros). A diferencia de bt-imagen, NO se estira: son mapas de
   bits de tamaño fijo y al ampliarlos se ven borrosos. Solo se
   centra, y se encoge si el bloque es más estrecho que la imagen. */
.pkp_block ul:has(> li.bt-widget){ display:block; }
.pkp_block ul li.bt-widget{
  display:block;
  padding:0;
  margin:0;
  line-height:0;
  text-align:center;
}
.pkp_block li.bt-widget::before{ content:none; }
.pkp_block ul li.bt-widget > a{
  display:inline-block;
  padding:0;
  min-height:0;
  line-height:0;
  border-bottom:none;
}
.pkp_block li.bt-widget img{
  display:block;
  margin:0 auto;
  max-width:100%;
  width:auto;          /* nunca ampliar por encima de su tamaño real */
  height:auto;
  border-radius:0;     /* el widget ya trae su propio marco */
}

@media (max-width:480px){
  .pkp_block li.bt-logo img{ height:28px; max-width:120px; }
}

/* Botón de llamada a la acción dentro de un bloque */
.pkp_block li.bt-cta{ display:block; padding:.6rem 0 .2rem; }
.pkp_block li.bt-cta::before{ content:none; }
.pkp_block li.bt-cta > a{
  display:block;
  text-align:center;
  background:var(--bt-purple);
  color:#fff;
  font-family:Montserrat,sans-serif;
  font-weight:600;
  font-size:.88rem;
  letter-spacing:.02em;
  padding:.62rem .9rem;
  border-radius:var(--bt-radius);
  border-bottom:none;
  transition:background .15s ease;
}
.pkp_block li.bt-cta > a:hover,
.pkp_block li.bt-cta > a:focus-visible{
  background:var(--bt-plum);
  color:#fff;
  border-bottom:none;
}

/* Destacado corto al principio de un bloque */
.pkp_block p > strong:only-child{
  display:block;
  color:var(--bt-plum);
  font-family:Montserrat,sans-serif;
  font-size:.95rem;
  margin-bottom:.15rem;
}

/* ============================================================
   5. LISTADOS DE NÚMEROS Y ARTÍCULOS
   ============================================================ */

.obj_article_summary{
  padding:1.05rem 0;
  border-bottom:1px solid var(--bt-line-soft);
}
.obj_article_summary:last-child{ border-bottom:none; }

.obj_article_summary > .title{
  font-size:1.06rem;
  font-weight:600;
  line-height:1.35;
  margin-bottom:.3rem;
  /* Títulos largos, sin guiones raros ni desbordes */
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:none;
}
.obj_article_summary > .title a{
  color:var(--bt-plum);
  text-decoration:none;
}
.obj_article_summary > .title a:hover{
  color:var(--bt-purple);
  text-decoration:underline;
}

.obj_article_summary .meta,
.obj_article_summary .authors{
  color:var(--bt-ink-3);
  font-size:.9rem;
}
.obj_article_summary .pages{
  color:var(--bt-ink-3);
  font-variant-numeric:tabular-nums;
}

/* Encabezado de sección dentro del índice del número */
.obj_issue_toc .section > h2{
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--bt-purple-mid);
  padding-bottom:.45rem;
  margin:2rem 0 .6rem;
  border-bottom:1px solid var(--bt-line);
}

/* Portada del número */
.obj_issue_toc .cover img,
.obj_issue_summary .cover img{
  max-width:100%;
  height:auto;
  border-radius:var(--bt-radius);
  box-shadow:var(--bt-shadow);
}

/* ============================================================
   6. PÁGINA DE ARTÍCULO
   ============================================================ */

.obj_article_details > .page_title{
  font-size:1.6rem;
  line-height:1.25;
  overflow-wrap:break-word;
}

.obj_article_details .authors .author{ margin-bottom:.65rem; }
.obj_article_details .author_name{ font-weight:600; color:var(--bt-ink); }
.obj_article_details .affiliation{ color:var(--bt-ink-3); font-size:.92rem; }

.obj_article_details .abstract h2,
.obj_article_details .main_entry h2{
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--bt-purple-mid);
  margin-bottom:.5rem;
}

.obj_article_details .abstract p{
  text-align:justify;
  hyphens:auto;
}

/* Barra lateral de detalles: DOI, licencia, número */
.obj_article_details .entry_details{
  background:var(--bt-lavender);
  border:1px solid var(--bt-line);
  border-radius:var(--bt-radius);
  padding:1rem 1.1rem;
}
.obj_article_details .entry_details .label{
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--bt-purple);
}

/* El DOI es largo y sin espacios: obligarlo a partirse */
.obj_article_details .item.doi .value,
.obj_article_details .item.doi a,
a[href*="doi.org"]{
  overflow-wrap:anywhere;
  word-break:break-word;
}

.obj_article_details .item.copyright{
  font-size:.88rem;
  color:var(--bt-ink-3);
}

/* Bloque de descarga de la galerada */
.obj_article_details .galleys_links{ margin:1.2rem 0; }

/* ============================================================
   7. FORMULARIOS
   ============================================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
select,
textarea{
  border:1.5px solid var(--bt-line);
  border-radius:var(--bt-radius);
  padding:.5rem .7rem;
  color:var(--bt-ink);
  background:var(--bt-paper);
  max-width:100%;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:hover,select:hover,textarea:hover{ border-color:var(--bt-purple-soft); }
input:focus,select:focus,textarea:focus{
  border-color:var(--bt-purple);
  outline:none;
  box-shadow:var(--bt-focus);
}
input:disabled,select:disabled,textarea:disabled{
  background:var(--bt-line-soft);
  color:var(--bt-ink-3);
  cursor:not-allowed;
}
label{ color:var(--bt-ink-2); font-weight:600; }

/* Mensajes del sistema */
.cmp_notification{
  border-left:4px solid var(--bt-purple);
  background:var(--bt-lavender);
  border-radius:var(--bt-radius);
  padding:.8rem 1rem;
}

/* ============================================================
   8. PIE DE PÁGINA
   ============================================================ */

.pkp_structure_footer_wrapper{
  background:var(--bt-lavender);
  border-top:3px solid var(--bt-purple);
  margin-top:3rem;
}
.pkp_structure_footer{ padding:2rem 0 1.5rem; color:var(--bt-ink-2); }
.pkp_structure_footer a{ color:var(--bt-purple); font-weight:600; }
.pkp_structure_footer a:hover{ color:var(--bt-plum); }
.pkp_structure_footer ul{ list-style:none; padding-left:0; }
.pkp_structure_footer li{ padding:.22rem 0; }
/* Marca de OJS/PKP en el pie: oculta.
   La licencia del software no obliga a mostrarla. */
.pkp_brand_footer,
.pkp_structure_footer .pkp_brand_footer,
a[href*="pkp.sfu.ca"],
a[href*="openjournalsystems"]{ display:none !important; }

/* ============================================================
   9. DESBORDAMIENTOS — el bloque que evita que nada se salga
   ============================================================ */

html,body{ overflow-x:hidden; }

img,video,iframe,embed,object{ max-width:100%; height:auto; }

/* Tablas: scroll propio en vez de romper la página */
.pkp_structure_main table{
  display:block;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-collapse:collapse;
}
.pkp_structure_main table th,
.pkp_structure_main table td{
  border:1px solid var(--bt-line);
  padding:.5rem .7rem;
  vertical-align:top;
}
.pkp_structure_main table th{
  background:var(--bt-lavender);
  color:var(--bt-plum);
  font-family:Montserrat,sans-serif;
  font-size:.82rem;
  text-align:left;
}

pre,code{ overflow-x:auto; max-width:100%; }
pre{
  background:var(--bt-line-soft);
  border:1px solid var(--bt-line);
  border-radius:var(--bt-radius);
  padding:.8rem 1rem;
}

/* Palabras muy largas: URLs, DOI, correos */
.pkp_structure_main a,
.pkp_block a,
.obj_article_details .value{ overflow-wrap:break-word; }

/* Contenido pegado desde Word en los campos ricos */
.pkp_structure_main [style*="width"]{ max-width:100% !important; }

/* ============================================================
   10. ADAPTACIÓN A MÓVIL
   Tres cortes: tableta (991), móvil (767) y móvil estrecho (480)
   ============================================================ */

/* --- Tableta --- */
@media (max-width:991px){
  .pkp_structure_content{ padding-top:1rem; }

  .pkp_structure_sidebar{
    margin-top:2.2rem;
    padding-top:1.6rem;
    border-top:2px solid var(--bt-lavender);
  }
  .pkp_structure_sidebar .pkp_block{ margin-bottom:.9rem; }

  /* Portada del número y su descripción: uno debajo del otro */
  .obj_issue_toc .heading,
  .current_issue .current_issue_title + div{ display:block; }
  .obj_issue_toc .cover,
  .current_issue .cover{
    float:none;
    margin:0 0 1.2rem;
    max-width:320px;
  }
}

/* --- Móvil --- */
@media (max-width:767px){
  body{ font-size:16px; }

  /* El tamaño de la cabecera ya se fija en el bloque de <=991px;
     aquí solo se afina para pantallas de teléfono */
  .pkp_site_name a,
  .pkp_site_name .is_text{ font-size:.98rem; line-height:1.24; }
  .pkp_site_name .is_img img{ max-height:40px; }

  h1{ font-size:1.5rem; }
  h2{ font-size:1.28rem; }
  h3{ font-size:1.1rem; }

  .obj_article_details > .page_title{ font-size:1.3rem; }
  .obj_article_summary > .title{ font-size:1rem; }
  .obj_article_summary{ padding:.9rem 0; }

  /* Objetivos táctiles: 44 px es el mínimo cómodo con el pulgar */
  .cmp_button,
  .pkp_button,
  .obj_galley_link,
  input[type="submit"]{
    padding:.7rem 1.1rem;
    min-height:44px;
    line-height:1.5;
  }
  .pkp_block li a,
  .pkp_structure_footer li a{
    display:inline-block;
    padding:.35rem 0;
    min-height:32px;
  }

  /* Las galeradas, apiladas y anchas: el botón principal del artículo */
  .obj_article_details .galleys_links,
  .obj_article_summary .galleys{
    display:flex;
    flex-direction:column;
    gap:.5rem;
  }
  .obj_article_details .galleys_links .obj_galley_link{
    display:block;
    text-align:center;
    width:100%;
  }

  /* Justificado + partición de palabras se ve mal en columnas estrechas */
  .obj_article_details .abstract p,
  .pkp_structure_main p{ text-align:left; hyphens:none; }

  /* Portadas e imágenes de bloque, contenidas */
  .obj_issue_toc .cover img,
  .current_issue .cover img,
  .pkp_block img{ max-width:100%; margin-left:auto; margin-right:auto; }

  /* Barra lateral de detalles del artículo, a lo ancho */
  .obj_article_details .entry_details{ margin-top:1.5rem; }

  .pkp_block li[class*="bt-"]{ font-size:1rem; padding-top:.55rem; padding-bottom:.55rem; }

  .pkp_structure_footer{ padding:1.6rem 0 1.2rem; }
  .pkp_structure_footer .pkp_footer_content{ text-align:left; }

  /* --- Compactado vertical ---
     En una pantalla estrecha todo va en una sola columna, así que los
     márgenes pensados para escritorio se acumulan y obligan a hacer
     mucho scroll antes de llegar al contenido. */
  .pkp_structure_content{ padding-top:.6rem; }
  .pkp_structure_main{ padding-left:.9rem; padding-right:.9rem; }

  h1,h2,h3{ margin-top:1.1rem; margin-bottom:.5rem; }
  .page_index_journal > .homepage_image{ margin-bottom:1rem; }
  .current_issue_title{ margin-top:1rem; }

  /* La portada ocupaba casi toda la pantalla */
  .obj_issue_toc .cover,
  .current_issue .cover{ max-width:220px; margin:0 auto 1rem; }

  .obj_issue_toc .section > h2{ margin-top:1.2rem; }
  .obj_article_summary{ padding:.75rem 0; }

  .pkp_structure_sidebar{ margin-top:1.6rem; padding-top:1.2rem; }
  .pkp_structure_sidebar .pkp_block{ margin-bottom:.7rem; }
}

/* --- Móvil estrecho --- */
@media (max-width:480px){
  .pkp_site_name a,
  .pkp_site_name .is_text{ font-size:.92rem; }
  .pkp_site_name_wrapper{ padding-left:2.9rem; }
  .pkp_site_nav_toggle{ width:2.3rem; height:2.3rem; }

  h1{ font-size:1.32rem; }
  .obj_article_details > .page_title{ font-size:1.18rem; }

  .pkp_structure_sidebar .pkp_block{ padding:.85rem .9rem; }
  .pkp_block .title{ font-size:.72rem; }

  /* En pantallas muy estrechas, un DOI o una URL puede romper la caja */
  .obj_article_details .entry_details .value,
  .obj_article_details .item.doi a{ font-size:.86rem; }

  /* Migas de pan largas: que no fuercen scroll lateral */
  .cmp_breadcrumbs{ font-size:.78rem; }
}

/* ============================================================
   11. MOVIMIENTO E IMPRESIÓN
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

@media print{
  .pkp_structure_sidebar,
  .pkp_navigation_primary_wrapper,
  .pkp_navigation_user_wrapper,
  .cmp_breadcrumbs,
  .block_make_submission{ display:none !important; }

  body{ color:#000; background:#fff; font-size:11pt; }
  a{ color:#000; text-decoration:underline; }
  /* Que las referencias impresas conserven su destino */
  .obj_article_details a[href^="http"]::after{
    content:" (" attr(href) ")";
    font-size:9pt;
    color:#444;
  }
  .pkp_structure_footer_wrapper{ border-top:1px solid #000; background:none; }
}