/* ============================================================================
   JOTMI — Página de artículo: layout 3:1 sin barra lateral + encabezado editorial
   OJS 3.3.0.22 · tema "Default"

   Subir en:  Configuración > Sitio web > Apariencia > pestaña "Avanzado"
              campo "Hoja de estilo de la revista"  (REEMPLAZA la hoja anterior).
   Acento configurable en una sola línea: --jot-accent.
   Orden de bloques: título · autores · DOI · ABSTRACT (panel) · KEYWORDS (pastillas).
   Todo acotado a body.pkp_page_article (el home y el resto del sitio no se tocan).
   ============================================================================ */

:root { --jot-accent: #006798; }   /* <- cambia aquí el color de marca si quieres */

/* ---------- A. LAYOUT: quitar barra lateral · artículo 3 / metadatos 1 ---------- */
.pkp_page_article .pkp_structure_sidebar { display: none; }

@media (min-width: 992px) {
    .pkp_page_article .pkp_structure_main {
        float: none; width: auto; margin-top: 2.857rem;
    }
    .pkp_page_article .pkp_structure_main::before { left: 0; }
    .pkp_page_article .pkp_structure_main::after  { left: auto; right: 0; }

    .pkp_page_article .obj_article_details .main_entry    { width: 75%; }
    .pkp_page_article .obj_article_details .entry_details { width: 25%; }
}

/* ---------- B. ENCABEZADO EDITORIAL (columna del artículo) ---------- */

/* Filete superior del bloque fuera: lo sustituye la regla de acento del título */
.pkp_page_article .obj_article_details .row { border-top: none; }

/* Título con regla de acento */
.pkp_page_article .obj_article_details > .page_title {
    font-size: 1.8rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 3px solid var(--jot-accent);
}

/* Autores: nombre marcado, afiliación atenuada, ORCID discreto */
.pkp_page_article .authors .name        { font-size: 1.05rem; font-weight: 600; }
.pkp_page_article .authors .affiliation { font-size: 0.93rem; color: rgba(0,0,0,0.5); }
.pkp_page_article .authors .orcid       { font-size: 0.78rem; }
.pkp_page_article .authors .orcid a     { color: rgba(0,0,0,0.45); }

/* Etiquetas de sección (DOI / Keywords) en versalitas atenuadas, en bloque */
.pkp_page_article .item.doi > .label,
.pkp_page_article .item.keywords > .label {
    display: block;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.4);
    margin: 0 0 0.55rem;
}
.pkp_page_article .item.doi a       { color: var(--jot-accent); text-decoration: none; }
.pkp_page_article .item.doi a:hover { text-decoration: underline; }

/* Abstract en panel: fondo muy claro + filete de acento + medida de lectura */
.pkp_page_article .item.abstract {
    /* sin max-width: el panel llena todo el ancho de la columna (75%).
       Si las líneas te quedan demasiado largas, añade p.ej. max-width: 60rem; */
    border-left: 3px solid var(--jot-accent);
    background: #f6fafb;
    background: color-mix(in srgb, var(--jot-accent) 5%, #fff);
    padding: 1.4rem 1.6rem;
}
.pkp_page_article .item.abstract > .label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--jot-accent);
    margin: 0 0 0.7rem;
}
.pkp_page_article .item.abstract p {
    line-height: 1.78;
    color: rgba(0,0,0,0.8);
}

/* Keywords como pastillas (necesita el micro-edit de plantilla; ver mensaje).
   Tintes derivados del acento con color-mix; el valor sólido es el fallback. */
.pkp_page_article .item.keywords .value .kw {
    display: inline-block;
    font-size: 0.82rem;
    line-height: 1;
    padding: 6px 11px;
    margin: 0 7px 7px 0;
    border-radius: 999px;
    text-decoration: none;
    background: #eaf2f6;
    background: color-mix(in srgb, var(--jot-accent) 9%, #fff);
    color: #024c6f;
    color: color-mix(in srgb, var(--jot-accent) 78%, #000);
    border: 1px solid #cfe1ea;
    border-color: color-mix(in srgb, var(--jot-accent) 22%, #fff);
}
.pkp_page_article .item.keywords .value .kw:hover {
    background: #dceaf1;
    background: color-mix(in srgb, var(--jot-accent) 16%, #fff);
}

/* ---------- C. KEYWORDS DEBAJO DEL ABSTRACT ----------
   Camino 1 (recomendado): mover la <section class="item keywords"> a justo
   DESPUÉS de la <section class="item abstract"> en la plantilla del tema hijo
   (orden correcto también en el DOM = mejor accesibilidad/SEO).
   Camino 2 (solo CSS, sin mover el bloque): DESCOMENTA esto.
   -----------------------------------------------------
.pkp_page_article .main_entry { display: flex; flex-direction: column; }
.pkp_page_article .main_entry > .item.abstract    { order: 1; }
.pkp_page_article .main_entry > .item.keywords    { order: 2; }
.pkp_page_article .main_entry > .item.author_bios { order: 3; }
.pkp_page_article .main_entry > .item.references  { order: 4; }
----------------------------------------------------- */

/* ============================================================================
   D. FONDO DE PÁGINA — gris muy suave en los márgenes + contenido en hoja blanca
      *** GLOBAL: aplica a TODO el sitio (portada, listados, artículos…),
      no va acotado a .pkp_page_article. ***
      El header conserva su banda propia y el footer su gris; solo cambian
      los márgenes laterales y el lienzo del contenido.
   ============================================================================ */
body { background: #f8fafc; }                 /* gris frío muy claro (cool), discreto, en los márgenes */
.pkp_structure_content { background: #fff; }  /* el contenido se mantiene en blanco */