/* =========================================================
d20-premium.css
Premium OJS content layer for Docentes20
Scope: body.d20-premium
=========================================================*/
/* D20_FINGERPRINT: OJSTEST_ACTIVE 2026-02-27T16:41Z */
body.d20-premium {
--d20-purple: #3f264d;
--d20-purple-700: #2f1b39;
--d20-gold: #c9a227;
--d20-bg: #f4f6fb;
--d20-card: #ffffff;
--d20-text: #1a2438;
--d20-muted: #5b6884;
--d20-border: rgba(26, 36, 56, 0.12);
--d20-radius: 16px;
--d20-radius-sm: 11px;
--d20-shadow: 0 10px 28px rgba(21, 34, 58, 0.09);
--d20-shadow-hover: 0 14px 32px rgba(21, 34, 58, 0.12);
--d20-gap-1: 8px;
--d20-gap-2: 16px;
--d20-gap-3: 24px;
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
/* --- Double scroll fix: global horizontal overflow guard --- */
html,
body {
max-width: 100%;
overflow-x: hidden;
}
body.d20-premium .pkp_structure_page {
background: var(--d20-bg);
max-width: 100%;
}
body.d20-premium .pkp_structure_content.container {
max-width: 1260px;
width: 100%;
padding: 18px 20px 28px;
overflow-y: visible !important;
}
body.d20-premium .pkp_structure_main,
body.d20-premium .pkp_structure_sidebar {
color: var(--d20-text);
line-height: 1.65;
max-width: 100%;
min-width: 0;
}
body.d20-premium #sidebar {
max-width: 100%;
min-width: 0;
}
body.d20-premium img,
body.d20-premium video,
body.d20-premium iframe,
body.d20-premium table {
max-width: 100%;
}
body.d20-premium pre,
body.d20-premium code {
white-space: pre-wrap;
word-break: break-word;
}
body.d20-premium .pkp_structure_main a,
body.d20-premium .pkp_structure_main p,
body.d20-premium .pkp_structure_main li {
overflow-wrap: anywhere;
word-break: break-word;
}
body.d20-premium .pkp_structure_main h1,
body.d20-premium .pkp_structure_main .page_title {
color: #131b2f;
font-size: clamp(1.95rem, 2.4vw, 2.35rem);
line-height: 1.2;
margin: 0 0 14px;
}
/* h2/h3 — see consolidated rules in stabilization section below */
body.d20-premium .pkp_structure_main p,
body.d20-premium .pkp_structure_main li,
body.d20-premium .pkp_structure_main dt,
body.d20-premium .pkp_structure_main dd {
color: var(--d20-muted);
font-size: 15px;
line-height: 1.65;
}
/* main content links — see stabilization section below */
body.d20-premium .pkp_structure_main>.page,
body.d20-premium .pkp_structure_main .issue-toc,
body.d20-premium .pkp_structure_main .issue-summary,
body.d20-premium .pkp_structure_main .obj_article_summary,
body.d20-premium .pkp_structure_main .article-summary,
body.d20-premium .pkp_structure_main .article-details,
body.d20-premium .pkp_structure_main .cmp_notification,
body.d20-premium .pkp_structure_main .search_results,
body.d20-premium .pkp_structure_sidebar .pkp_block {
background: var(--d20-card) !important;
border: 1px solid var(--d20-border) !important;
border-radius: var(--d20-radius) !important;
box-shadow: var(--d20-shadow) !important;
}
body.d20-premium .pkp_structure_main>.page,
body.d20-premium .pkp_structure_main .issue-toc,
body.d20-premium .pkp_structure_main .article-details,
body.d20-premium .pkp_structure_main .issue-summary {
padding: 22px 24px;
}
body.d20-premium .pkp_structure_main .issue-summary,
body.d20-premium .pkp_structure_main .obj_article_summary,
body.d20-premium .pkp_structure_main .article-summary {
margin: 0 0 14px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.d20-premium .pkp_structure_main .issue-summary:hover,
body.d20-premium .pkp_structure_main .obj_article_summary:hover,
body.d20-premium .pkp_structure_main .article-summary:hover {
transform: translateY(-2px);
box-shadow: var(--d20-shadow-hover);
}
/* Sidebar block margin/padding/titles — see consolidated rules in sections below */
body.d20-premium .cmp_button,
body.d20-premium .pkp_button,
body.d20-premium a.cmp_button,
body.d20-premium .obj_galley_link,
body.d20-premium .btn {
border-radius: var(--d20-radius-sm);
border: 1px solid rgba(255, 255, 255, 0.15);
background: var(--d20-purple);
color: #fff;
font-weight: 700;
text-decoration: none;
padding: 10px 14px;
transition: transform 0.18s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
body.d20-premium .cmp_button:hover,
body.d20-premium .pkp_button:hover,
body.d20-premium a.cmp_button:hover,
body.d20-premium .obj_galley_link:hover,
body.d20-premium .btn:hover {
background: var(--d20-purple-700);
color: #fff;
box-shadow: 0 8px 18px rgba(63, 38, 77, 0.25);
transform: translateY(-1px);
}
body.d20-premium .cmp_button:focus-visible,
body.d20-premium .pkp_button:focus-visible,
body.d20-premium a.cmp_button:focus-visible,
body.d20-premium .obj_galley_link:focus-visible,
body.d20-premium .btn:focus-visible {
outline: 2px solid var(--d20-gold);
outline-offset: 2px;
}
body.d20-premium input,
body.d20-premium select,
body.d20-premium textarea {
border-radius: var(--d20-radius-sm);
border: 1px solid rgba(26, 36, 56, 0.2);
padding: 10px 12px;
color: var(--d20-text);
background: #fff;
}
body.d20-premium input:focus,
body.d20-premium select:focus,
body.d20-premium textarea:focus {
border-color: rgba(63, 38, 77, 0.5);
box-shadow: 0 0 0 3px rgba(63, 38, 77, 0.12);
outline: 0;
}
/* Issue archive: ensure cover thumbnails are visible and aligned */
/* Issue archive: ensure cover thumbnails are visible and aligned */
body.d20-premium .page_issue_archive .issues .issue-summary {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 14px;
}
body.d20-premium .page_issue_archive .issue-summary .media-left,
body.d20-premium .page_issue_archive .issue-summary .cover {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
flex: 0 0 86px;
width: 86px;
max-width: 86px;
margin: 0;
}
body.d20-premium .page_issue_archive .issue-summary .cover img,
body.d20-premium .page_issue_archive .issue-summary .media-object {
display: block !important;
width: 120px !important;
height: auto !important;
max-height: 118px;
object-fit: cover;
border-radius: 12px;
border: 1px solid rgba(26, 36, 56, 0.14);
box-shadow: 0 6px 16px rgba(21, 34, 58, 0.12);
}
body.d20-premium .page_issue_archive .issue-summary .media-body {
min-width: 0;
flex: 1 1 auto;
}
/* Current issue TOC cleanup: headers and full issue formats row */
body.d20-premium .page_issue .issue-toc .heading {
margin-bottom: 14px;
}
body.d20-premium .page_issue .issue-toc .heading h1,
body.d20-premium .page_issue .issue-toc .heading h2,
body.d20-premium .page_issue .issue-toc .heading .title,
body.d20-premium .page_issue .issue-toc>.galleys .page-header h2,
body.d20-premium .page_issue .issue-toc>.galleys .page-header h2 small,
body.d20-premium .page_issue .issue-toc .section .page-header h2,
body.d20-premium .page_issue .issue-toc .section .page-header h2 small {
color: #1a2438;
font-size: clamp(1.375rem, 1.95vw, 1.5rem);
font-weight: 800;
line-height: 1.25;
letter-spacing: 0.01em;
margin-bottom: 14px;
}
/* Restore premium hierarchy for top-level section h2 (without affecting article h3 titles) */
body.d20-premium .page_issue .issue-toc .section>.page-header h2,
body.d20-premium .page_issue_archive .issue-summary .media-heading,
body.d20-premium .pkp_page_index .pkp_structure_main>.page>h2 {
font-size: clamp(1.375rem, 1.9vw, 1.5rem);
font-weight: 800;
letter-spacing: 0.01em;
line-height: 1.28;
color: #232f4d;
}
/* Restore issue/archive card layout with left thumbnail */
body.d20-premium .page_issue .article-summary.media,
body.d20-premium .page_issue_archive .issue-summary.media,
body.d20-premium .page_issue .issue-summary.media {
display: flex;
align-items: flex-start;
gap: 18px;
background: #fff;
border: 1px solid var(--d20-border);
border-radius: 16px;
box-shadow: var(--d20-shadow);
padding: 20px 22px;
margin: 0 0 22px;
}
body.d20-premium .page_issue .article-summary.media .media-left,
body.d20-premium .page_issue .article-summary.media .cover,
body.d20-premium .page_issue_archive .issue-summary.media .media-left,
body.d20-premium .page_issue_archive .issue-summary.media .cover,
body.d20-premium .page_issue .issue-summary.media .media-left,
body.d20-premium .page_issue .issue-summary.media .cover {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
flex: 0 0 128px;
width: 128px;
max-width: 128px;
margin: 0;
}
body.d20-premium .page_issue .article-summary.media .cover img,
body.d20-premium .page_issue .article-summary.media .media-object,
body.d20-premium .page_issue_archive .issue-summary.media .cover img,
body.d20-premium .page_issue_archive .issue-summary.media .media-object,
body.d20-premium .page_issue .issue-summary.media .cover img,
body.d20-premium .page_issue .issue-summary.media .media-object {
display: block !important;
width: 100% !important;
height: auto !important;
max-height: 180px;
object-fit: cover;
border-radius: 12px;
border: 1px solid rgba(26, 36, 56, 0.14);
box-shadow: 0 6px 16px rgba(21, 34, 58, 0.12);
}
body.d20-premium .page_issue .article-summary.media .media-body,
body.d20-premium .page_issue_archive .issue-summary.media .media-body,
body.d20-premium .page_issue .issue-summary.media .media-body {
min-width: 0;
flex: 1 1 auto;
}
body.d20-premium .page_issue .issue-toc>.galleys {
margin: 0 0 18px;
padding: 14px;
border: 1px solid rgba(63, 38, 77, 0.16);
border-radius: 14px;
background: linear-gradient(180deg, rgba(63, 38, 77, 0.04), rgba(63, 38, 77, 0.01));
}
body.d20-premium .page_issue .issue-toc>.galleys .page-header {
margin: 0 0 10px;
padding: 0;
border: 0;
}
body.d20-premium .page_issue .issue-toc>.galleys .btn-group {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
body.d20-premium .page_issue .issue-toc>.galleys .btn-group::before {
content: "Formato:";
color: #3e4a68;
font-weight: 700;
margin-right: 2px;
}
body.d20-premium .page_issue .issue-toc>.galleys .btn-group .galley-link {
margin: 0;
}
body.d20-premium .page_issue .current_issue>a.read-more,
body.d20-premium .page_issue .current_issue>a.d20-btn--all-issues,
body.d20-premium .page_issue .current_issue>a.read-more.d20-btn--all-issues {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
width: max-content;
margin: 16px 0 8px auto;
border-radius: var(--d20-radius-sm);
padding: 10px 14px;
border: 1px solid rgba(63, 38, 77, 0.2);
background: #fff;
color: var(--d20-purple);
font-weight: 700;
text-decoration: none;
}
body.d20-premium .page_issue .current_issue>a.read-more:hover,
body.d20-premium .page_issue .current_issue>a.d20-btn--all-issues:hover,
body.d20-premium .page_issue .current_issue>a.read-more.d20-btn--all-issues:hover {
background: rgba(63, 38, 77, 0.07);
color: var(--d20-purple-700);
}
/* TOP12 card spacing normalization */
body.d20-premium .most-viewed {
padding: 16px !important;
}
body.d20-premium .most-viewed .most-viewed-content {
padding: 12px 4px !important;
border-bottom: 1px solid rgba(26, 36, 56, 0.12) !important;
}
body.d20-premium .most-viewed .most-viewed-headline {
border-radius: 12px 12px 0 0;
}
/* Indexaciones normalization */
body.d20-premium #indexaciones,
body.d20-premium [id*="indexaciones" i],
body.d20-premium #customblock-indexaciones,
body.d20-premium .d20-section--indexaciones {
background: var(--d20-card);
border: 1px solid var(--d20-border);
border-radius: var(--d20-radius);
box-shadow: var(--d20-shadow);
padding: 16px;
margin: 14px 0;
}
body.d20-premium #indexaciones img,
body.d20-premium [id*="indexaciones" i] img,
body.d20-premium #customblock-indexaciones img,
body.d20-premium .d20-section--indexaciones img {
max-height: 66px;
width: auto;
object-fit: contain;
filter: grayscale(22%);
opacity: 0.92;
}
body.d20-premium #indexaciones img:hover,
body.d20-premium [id*="indexaciones" i] img:hover,
body.d20-premium #customblock-indexaciones img:hover,
body.d20-premium .d20-section--indexaciones img:hover {
filter: grayscale(0%);
opacity: 1;
}
/* Custom Indexaciones page: normalize legacy W3 logo grids in both locales. */
body.d20-premium.pkp_page_indexaciones .page_about .w3-row {
clear: both;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 0;
margin: 0 0 8px;
}
body.d20-premium.pkp_page_indexaciones .page_about .w3-row > h3 {
flex: 0 0 100%;
width: 100%;
margin: 14px 0 8px !important;
border-radius: var(--d20-radius-sm);
background: #eef3fb !important;
color: var(--d20-purple) !important;
font-size: 1rem !important;
line-height: 1.35 !important;
}
body.d20-premium.pkp_page_indexaciones .page_about .w3-row > .w3-row {
flex: 0 0 100%;
width: 100%;
}
body.d20-premium.pkp_page_indexaciones .page_about .w3-row > .w3-row:has(> h3) {
margin-top: 6px;
}
body.d20-premium.pkp_page_indexaciones .page_about .w3-row > .w3-row:has(img[src*="ror-logo.svg"]) + .w3-row:has(img[src*="ror-logo.svg"]) {
display: none !important;
}
body.d20-premium.pkp_page_indexaciones .page_about .w3-quarter,
body.d20-premium.pkp_page_indexaciones .page_about .w3-third,
body.d20-premium.pkp_page_indexaciones .page_about .w3-half {
float: none !important;
box-sizing: border-box;
min-height: 68px;
display: flex;
align-items: center;
justify-content: center;
padding: 6px 12px !important;
}
body.d20-premium.pkp_page_indexaciones .page_about .w3-quarter {
width: 25% !important;
}
body.d20-premium.pkp_page_indexaciones .page_about .w3-third {
width: 33.333333% !important;
}
body.d20-premium.pkp_page_indexaciones .page_about .w3-half {
width: 50% !important;
}
body.d20-premium.pkp_page_indexaciones .page_about .w3-row:has(> .w3-quarter img[src*="ror-logo.svg"]) > .w3-quarter {
width: 20% !important;
}
body.d20-premium.pkp_page_indexaciones .page_about .w3-quarter:not(:has(a)),
body.d20-premium.pkp_page_indexaciones .page_about .w3-third:not(:has(a)),
body.d20-premium.pkp_page_indexaciones .page_about .w3-half:not(:has(a)) {
display: none !important;
min-height: 0 !important;
padding: 0 !important;
}
body.d20-premium.pkp_page_indexaciones .page_about .w3-quarter a,
body.d20-premium.pkp_page_indexaciones .page_about .w3-third a,
body.d20-premium.pkp_page_indexaciones .page_about .w3-half a {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
min-height: 56px;
}
body.d20-premium.pkp_page_indexaciones .page_about .w3-row img {
width: auto !important;
max-width: 142px !important;
max-height: 58px !important;
height: auto !important;
object-fit: contain;
filter: grayscale(18%);
opacity: 0.94;
transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
body.d20-premium.pkp_page_indexaciones .page_about .w3-row a:hover img,
body.d20-premium.pkp_page_indexaciones .page_about .w3-row a:focus img {
filter: grayscale(0%);
opacity: 1;
transform: translateY(-1px);
}
@media (max-width: 767px) {
body.d20-premium.pkp_page_indexaciones .page_about .w3-quarter,
body.d20-premium.pkp_page_indexaciones .page_about .w3-third,
body.d20-premium.pkp_page_indexaciones .page_about .w3-half {
width: 50% !important;
min-height: 62px;
padding: 6px 10px !important;
}
body.d20-premium.pkp_page_indexaciones .page_about .w3-row img {
max-width: 124px !important;
max-height: 50px !important;
}
}
/* Header link recovery: keep navbar links white + premium hover */
body.d20-premium .d20-shell--header .d20-navbar a,
body.d20-premium .d20-shell--header .d20-navbar a:visited {
color: #fff !important;
}
body.d20-premium .d20-shell--header .d20-navbar a:hover,
body.d20-premium .d20-shell--header .d20-navbar a:focus {
color: var(--d20-gold) !important;
}
body.d20-premium .d20-shell--header .d20-user-menu>.d20-user-menu-item>a {
color: #fff !important;
}
body.d20-premium .d20-shell--header .d20-user-menu>.d20-user-menu-item.login>a,
body.d20-premium .d20-shell--header .d20-user-menu>.d20-user-menu-item.register>a {
color: #fff !important;
}
/* OJS user menu output may omit .login/.register classes; style by target URLs */
body.d20-premium .d20-shell--header .d20-user-menu>li>a[href*="/user/register"] {
background: var(--d20-gold) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
color: #111 !important;
font-weight: 800 !important;
}
body.d20-premium .d20-shell--header .d20-user-menu>li>a[href*="/login"] {
background: rgba(255, 255, 255, 0.12) !important;
border: 1px solid rgba(255, 255, 255, 0.32) !important;
color: #fff !important;
font-weight: 700 !important;
}
body.d20-premium .d20-shell--header .d20-user-menu>li>a[href*="/user/register"]:hover,
body.d20-premium .d20-shell--header .d20-user-menu>li>a[href*="/user/register"]:focus {
background: #d7b54a !important;
color: #111 !important;
}
body.d20-premium .d20-shell--header .d20-user-menu>li>a[href*="/login"]:hover,
body.d20-premium .d20-shell--header .d20-user-menu>li>a[href*="/login"]:focus {
background: rgba(255, 255, 255, 0.22) !important;
color: #fff !important;
}
body.d20-premium .d20-shell--header .d20-btn-cta {
color: #101010 !important;
}
body.d20-premium .d20-shell--header .d20-btn-cta--ghost {
color: #fff !important;
}
@media (max-width: 992px) {
body.d20-premium .pkp_structure_content.container {
padding-left: 14px;
padding-right: 14px;
}
body.d20-premium .page_issue_archive .issues .issue-summary {
gap: 12px;
}
body.d20-premium .page_issue .issue-toc>.galleys .btn-group {
align-items: flex-start;
}
}
@media (max-width: 640px) {
body.d20-premium .page_issue_archive .issues .issue-summary {
flex-direction: column;
}
body.d20-premium .page_issue_archive .issue-summary .media-left,
body.d20-premium .page_issue_archive .issue-summary .cover {
width: 94px;
max-width: 94px;
flex-basis: 94px;
}
body.d20-premium .page_issue .article-summary.media,
body.d20-premium .page_issue_archive .issue-summary.media,
body.d20-premium .page_issue .issue-summary.media {
flex-direction: column;
gap: 12px;
padding: 16px;
}
body.d20-premium .page_issue .article-summary.media .media-left,
body.d20-premium .page_issue .article-summary.media .cover,
body.d20-premium .page_issue_archive .issue-summary.media .media-left,
body.d20-premium .page_issue_archive .issue-summary.media .cover,
body.d20-premium .page_issue .issue-summary.media .media-left,
body.d20-premium .page_issue .issue-summary.media .cover {
width: min(42vw, 140px);
max-width: min(42vw, 140px);
flex-basis: auto;
}
body.d20-premium .page_issue .issue-toc>.galleys .btn-group::before {
width: 100%;
margin: 0 0 2px;
}
}
@media (max-width: 480px) {
body.d20-premium .page_issue .current_issue>a.read-more,
body.d20-premium .page_issue .current_issue>a.d20-btn--all-issues,
body.d20-premium .page_issue .current_issue>a.read-more.d20-btn--all-issues {
display: flex;
width: 100%;
margin: 16px 0 8px;
justify-content: center;
}
}
/* =========================================================
D20 v20260226-38 - issue cards, headings, links, CTA polish
========================================================= */
body.d20-premium .page_issue .pkp_structure_main {
padding-top: 10px;
}
body.d20-premium .page_issue .issue-toc {
margin-top: 10px;
}
body.d20-premium .page_issue .issue-toc .media-left,
body.d20-premium .page_issue_archive .issue-summary .media-left {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
flex: 0 0 120px;
width: 120px;
max-width: 120px;
}
body.d20-premium .page_issue .issue-toc .media-left img,
body.d20-premium .page_issue_archive .issue-summary .cover img,
body.d20-premium .page_issue_archive .issue-summary .media-left img {
display: block !important;
width: 120px !important;
max-width: 120px !important;
height: auto !important;
border-radius: 12px;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}
body.d20-premium .page_issue .issue-toc .media,
body.d20-premium .page_issue_archive .issue-summary {
display: flex;
gap: 16px;
align-items: flex-start;
}
body.d20-premium .pkp_structure_main a.d20-btn--all-issues,
body.d20-premium .pkp_structure_main a.read-more.d20-btn--all-issues {
margin-left: auto;
}
/* =========================================================
D20 v20260227-01 - premium content stabilization
========================================================= */
body.d20-premium .d20-shell--header .d20-nav-menu a {
color: #fff !important;
opacity: 1;
}
body.d20-premium .d20-shell--header .d20-nav-menu a:hover,
body.d20-premium .d20-shell--header .d20-nav-menu a:focus {
color: var(--d20-gold) !important;
text-decoration: none;
}
body.d20-premium .d20-shell--header a:focus-visible {
outline: 2px solid var(--d20-gold);
outline-offset: 3px;
}
body.d20-premium .pkp_structure_main a {
color: var(--d20-purple);
text-decoration: none;
}
body.d20-premium .pkp_structure_main a:hover {
color: var(--d20-gold);
text-decoration: underline;
}
body.d20-premium .pkp_structure_main a:visited {
color: #4b2d5b;
}
body.d20-premium .pkp_structure_sidebar .pkp_block a {
color: var(--d20-purple);
}
body.d20-premium .pkp_structure_sidebar .pkp_block a:hover {
color: var(--d20-gold);
}
body.d20-premium .pkp_structure_main .btn,
body.d20-premium .pkp_structure_main .btn a {
color: #fff !important;
}
body.d20-premium .pkp_structure_main .btn:hover {
filter: brightness(1.03);
}
body.d20-premium .pkp_structure_main h2 {
font-size: 22px !important;
font-weight: 800 !important;
margin: 18px 0 12px !important;
letter-spacing: 0.2px !important;
}
body.d20-premium .pkp_structure_main h3 {
font-size: 18px !important;
font-weight: 800 !important;
margin: 16px 0 10px !important;
}
body.d20-premium .page_issue .issue-toc {
padding-top: 12px;
}
body.d20-premium .page_issue_archive .issue-summary .media-left,
body.d20-premium .page_issue_archive .issue-summary .cover {
display: block !important;
}
body.d20-premium .page_issue_archive .issue-summary .media-left img,
body.d20-premium .page_issue_archive .issue-summary .cover img {
width: 120px;
height: auto;
border-radius: 12px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
}
body.d20-premium .page_issue_archive .issue-summary {
display: flex;
gap: 16px;
align-items: flex-start;
}
body.d20-premium .page_issue_archive .issue-summary .media-body {
flex: 1;
min-width: 0;
}
body.d20-premium .obj_article_summary {
border-radius: 16px;
padding: 18px 18px;
margin: 14px 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
overflow-wrap: anywhere;
}
/* Galley button overrides consolidated into base (L200) + B2 FIX (L916) */
body.d20-premium a.read-more,
body.d20-premium .read-more,
body.d20-premium .d20-btn--all-issues {
display: inline-flex;
margin-top: 18px;
}
body.d20-premium .pkp_structure_main .issue-to-archive,
body.d20-premium .pkp_structure_main .all-issues-wrap {
display: flex;
justify-content: flex-end;
margin-top: 16px;
}
body.d20-premium .page_issue .issue-toc .section>.page-header h2,
body.d20-premium .page_issue .issue-toc>.galleys .page-header h2,
body.d20-premium .page_issue_archive .issue-summary .media-heading,
body.d20-premium .pkp_page_index .pkp_structure_main>.page>h2,
body.d20-premium .pkp_structure_main .page-header h2 {
font-size: 22px !important;
font-weight: 800 !important;
margin: 18px 0 12px !important;
letter-spacing: 0.2px !important;
}
/* =========================================================
D20 FIX: HOMEPAGE HARD RESET — CURRENT ISSUE
Strategy: Block display + Flex heading row + 280px cover
========================================================= */
/* Número actual — volume title spacing */
body.d20-premium.pkp_page_index .current_issue_title.lead {
font-size: 1.25rem;
font-weight: 600;
color: var(--d20-text, #1a2438);
margin: 0 0 18px;
}
/* 1) Force homepage current_issue to block layout */
body.d20-premium.pkp_page_index section.current_issue {
display: block !important;
position: relative;
width: 100% !important;
margin: 30px 0;
padding: 0;
background: transparent;
border: none;
box-shadow: none;
}
/* 2) Ensure heading row behaves as Bootstrap row */
body.d20-premium.pkp_page_index section.current_issue .issue-toc>.heading.row {
display: flex;
flex-wrap: wrap;
margin-left: 0;
margin-right: 0;
background: #fff;
border-radius: 18px;
padding: 24px;
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}
/* 3) Fix cover + content column sizing */
body.d20-premium.pkp_page_index section.current_issue .thumbnail {
flex: 0 0 280px;
max-width: 280px;
padding-left: 0;
}
body.d20-premium.pkp_page_index section.current_issue .thumbnail img {
width: 100%;
height: auto;
border-radius: 14px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
body.d20-premium.pkp_page_index section.current_issue .issue-details {
flex: 1 1 auto;
min-width: 300px;
padding-left: 30px;
}
/* 4) Kill vertical purple rail and label */
body.d20-premium.pkp_page_index section.current_issue::before,
body.d20-premium.pkp_page_index section.current_issue::after {
display: none !important;
}
body.d20-premium.pkp_page_index .current_issue .page-header {
position: static !important;
writing-mode: horizontal-tb !important;
margin-bottom: 12px;
}
body.d20-premium.pkp_page_index .current_issue .page-header h1,
body.d20-premium.pkp_page_index .current_issue .page-header h2 {
position: static !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* 5) Fix CTA button */
body.d20-premium.pkp_page_index section.current_issue>a.read-more,
body.d20-premium.pkp_page_index section.current_issue a[href*="/issue/archive"] {
display: inline-flex !important;
height: auto !important;
width: auto !important;
margin-top: 18px;
float: none !important;
clear: both;
}
/* Responsive Reset */
@media (max-width: 991px) {
body.d20-premium.pkp_page_index section.current_issue .thumbnail {
flex: 0 0 240px;
max-width: 240px;
}
}
@media (max-width: 768px) {
body.d20-premium.pkp_page_index section.current_issue .issue-toc>.heading.row {
flex-direction: column;
align-items: center;
text-align: center;
padding: 20px;
}
body.d20-premium.pkp_page_index section.current_issue .thumbnail {
flex: 0 0 auto;
max-width: 200px;
margin-bottom: 20px;
}
body.d20-premium.pkp_page_index section.current_issue .issue-details {
padding-left: 0;
width: 100%;
}
body.d20-premium.pkp_page_index section.current_issue>a.read-more,
body.d20-premium.pkp_page_index section.current_issue a[href*="/issue/archive"] {
justify-content: center;
width: 100% !important;
}
}
/* =========================================================
D20 FIX: B1 — Issue TOC section headings larger + top spacing
Scoped to index and issue pages only
========================================================= */
body.d20-premium.pkp_page_index .issue-toc h2,
body.d20-premium.pkp_page_index .issue-toc .tocSectionTitle,
body.d20-premium.pkp_page_issue .issue-toc h2,
body.d20-premium.pkp_page_issue .issue-toc .tocSectionTitle {
font-size: 24px !important;
font-weight: 800 !important;
margin-top: 24px !important;
margin-bottom: 12px !important;
line-height: 1.22 !important;
color: var(--d20-purple) !important;
letter-spacing: 0.2px;
}
@media (max-width: 640px) {
body.d20-premium.pkp_page_index .issue-toc h2,
body.d20-premium.pkp_page_index .issue-toc .tocSectionTitle,
body.d20-premium.pkp_page_issue .issue-toc h2,
body.d20-premium.pkp_page_issue .issue-toc .tocSectionTitle {
font-size: 19px !important;
margin-top: 20px !important;
}
}
/* Galley buttons — see AUTHORITATIVE block below */
/* =========================================================
D20 FIX: B3 — Article card text right padding
========================================================= */
body.d20-premium .obj_article_summary .media-body,
body.d20-premium .obj_article_summary .summary,
body.d20-premium .obj_article_summary .title,
body.d20-premium .obj_article_summary .meta {
padding-right: 20px;
}
@media (max-width: 640px) {
body.d20-premium .obj_article_summary .media-body,
body.d20-premium .obj_article_summary .summary,
body.d20-premium .obj_article_summary .title,
body.d20-premium .obj_article_summary .meta {
padding-right: 14px;
padding-left: 6px;
}
}
/* =========================================================
D20 FIX: Phase 4 — Counter card styling
========================================================= */
body.d20-premium .d20-counter-card {
text-align: center;
padding: 0;
}
body.d20-premium .d20-counter-title {
margin: 0;
padding: 11px 12px;
color: #2a3350;
border-bottom: 1px solid rgba(63, 38, 77, 0.18);
border-left: 4px solid var(--d20-purple);
font-size: 1rem;
font-weight: 800;
background: #f8f9fc;
text-align: left;
}
body.d20-premium .d20-counter-body {
padding: 14px;
}
body.d20-premium .d20-counter-body img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
/* =========================================================
D20 FIX: Phase 5A — Resumen padding on article detail
========================================================= */
body.d20-premium.pkp_page_article .article-summary,
body.d20-premium.pkp_page_article .article-abstract {
padding: 16px 20px;
}
body.d20-premium.pkp_page_article .article-summary h2 {
margin-top: 0;
}
/* =========================================================
D20 FIX: Phase 5B — Metricas panel styling
========================================================= */
body.d20-premium.pkp_page_article .article-more-details .panel {
border: 1px solid var(--d20-border);
border-radius: var(--d20-radius);
box-shadow: var(--d20-shadow);
overflow: hidden;
margin-bottom: 16px;
}
body.d20-premium.pkp_page_article .article-more-details .panel-heading {
background: var(--d20-purple) !important;
color: #fff !important;
font-weight: 800;
font-size: 15px;
padding: 12px 16px;
border-bottom: none;
margin: 0;
}
body.d20-premium.pkp_page_article .article-more-details .panel-body {
padding: 14px 16px;
font-size: 14px;
line-height: 1.6;
color: var(--d20-text);
}
body.d20-premium.pkp_page_article .article-more-details .panel-body strong {
color: #1a2438;
font-weight: 700;
}
body.d20-premium.pkp_page_article .article-more-details .how-to-cite .panel-heading {
background: var(--d20-purple) !important;
color: #fff !important;
}
body.d20-premium.pkp_page_article .article-more-details .how-to-cite .panel-body {
background: #fafbfe;
}
/* Article detail — inline section headers with purple bg */
body.d20-premium.pkp_page_article .article-more-details h2[style*="background-color"],
body.d20-premium.pkp_page_article .article-references h2[style*="background-color"] {
border-radius: var(--d20-radius-sm) var(--d20-radius-sm) 0 0;
font-size: 16px !important;
font-weight: 800;
padding: 12px 16px !important;
}
/* =========================================================
D20 FIX: Phase 5C — Community CTA card (Telegram/WhatsApp)
========================================================= */
body.d20-premium .d20-community-cta {
clear: both;
margin: 48px 24px 32px;
border-radius: var(--d20-radius);
background: #f8f7fb;
box-shadow: 0 2px 10px rgba(63, 38, 77, 0.06);
overflow: hidden;
border: 1px solid #e4dfe9;
}
body.d20-premium .d20-community-cta__body {
padding: 36px 32px;
text-align: center;
}
body.d20-premium .d20-community-cta__icon {
font-size: 28px;
margin-bottom: 8px;
display: block;
}
body.d20-premium .d20-community-cta__title,
body.d20-premium .d20-community-cta .d20-community-cta__title,
body.d20-premium h3.d20-community-cta__title {
color: #111827 !important;
font-size: 20px !important;
font-weight: 800 !important;
margin: 0 0 6px !important;
line-height: 1.3 !important;
opacity: 1 !important;
-webkit-text-fill-color: #111827 !important;
}
body.d20-premium .d20-community-cta__text {
color: #5b6884 !important;
font-size: 14px;
line-height: 1.55;
margin: 0 0 20px;
}
body.d20-premium .d20-community-cta__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 28px;
border-radius: 999px;
background: var(--d20-gold);
color: #101010 !important;
font-weight: 800;
font-size: 14px;
text-decoration: none !important;
text-transform: uppercase;
letter-spacing: 0.3px;
transition: filter 0.2s, transform 0.2s;
border: 2px solid var(--d20-gold);
}
body.d20-premium .d20-community-cta__btn:hover {
filter: brightness(1.1);
transform: translateY(-1px);
color: #101010 !important;
text-decoration: none !important;
}
body.d20-premium .d20-community-cta__btn:focus-visible {
outline: 2px solid var(--d20-purple);
outline-offset: 2px;
}
/* Channel buttons row */
body.d20-premium .d20-community-cta__channels {
display: flex;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
body.d20-premium .d20-community-cta__btn--whatsapp {
background: #25D366;
border-color: #25D366;
color: #fff !important;
}
body.d20-premium .d20-community-cta__btn--whatsapp:hover {
color: #fff !important;
filter: brightness(1.1);
transform: translateY(-1px);
}
body.d20-premium .d20-community-cta__btn--telegram {
background: #0088cc;
border-color: #0088cc;
color: #fff !important;
}
body.d20-premium .d20-community-cta__btn--telegram:hover {
color: #fff !important;
filter: brightness(1.1);
transform: translateY(-1px);
}
body.d20-premium .d20-community-cta__btn .fa {
font-size: 18px;
}
@media (max-width: 640px) {
body.d20-premium .d20-community-cta__body {
padding: 22px 18px;
}
body.d20-premium .d20-community-cta__title {
font-size: 18px;
}
body.d20-premium .d20-community-cta__channels {
flex-direction: column;
align-items: center;
}
}
/* =====================================================
D20 · CURRENT ISSUE · INSTITUTIONAL PREMIUM
===================================================== */
.d20-issue-premium {
background: #ffffff;
border-radius: 20px;
padding: 36px 42px;
margin: 30px 0;
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.06);
border: 1px solid rgba(0, 0, 0, 0.05);
}
/* ===========================
HEADER
=========================== */
.d20-issue-header {
margin-bottom: 30px;
padding-bottom: 18px;
border-bottom: 2px solid #ffcc00;
}
.d20-issue-header h2 {
margin: 0;
font-size: 15px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--d20-purple);
}
.d20-issue-header h1 {
margin: 6px 0 8px 0;
font-size: 26px;
font-weight: 800;
color: #1f2937;
}
.d20-issue-subtitle {
margin: 0;
font-size: 13px;
color: #6b7280;
font-weight: 500;
}
/* ===========================
GRID LAYOUT
=========================== */
.d20-issue-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
@media (max-width: 900px) {
.d20-issue-grid {
grid-template-columns: 1fr;
gap: 28px;
}
}
/* ===========================
BOX STYLE
=========================== */
.d20-box {
background: #fafafa;
border-radius: 16px;
padding: 22px 24px;
border-left: 6px solid var(--d20-purple);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}
.d20-box h3 {
margin: 0 0 18px 0;
font-size: 16px;
font-weight: 800;
color: #2c2f36;
letter-spacing: 0.3px;
}
/* ===========================
META LIST
=========================== */
.d20-list {
list-style: none;
margin: 0;
padding: 0;
}
.d20-list li {
display: grid;
grid-template-columns: 190px 1fr;
column-gap: 18px;
padding: 9px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
font-size: 14px;
}
.d20-list li:last-child {
border-bottom: none;
}
/* CATEGORY BOLD */
.d20-list li span {
font-weight: 700;
color: #1f2937;
}
/* VALUE LIGHTER */
.d20-list li strong {
font-weight: 500;
color: #4b5563;
word-break: break-word;
}
/* ===========================
FOOTER META
=========================== */
.d20-issue-footer {
margin-top: 28px;
padding-top: 18px;
border-top: 1px solid rgba(0, 0, 0, 0.08);
font-size: 13px;
color: #6b7280;
}
.d20-issue-footer p {
margin: 0;
}
/* =========================================================
D20: Article file buttons (PDF/HTML/XML/EPUB)
AUTHORITATIVE — placed last to override Bootstrap .btn-primary
Scoped to body.d20-premium only
========================================================= */
/* Container: segmented pill group */
body.d20-premium .obj_article_summary .galleys_links,
body.d20-premium .obj_article_summary .galleys,
body.d20-premium .obj_article_summary .item.galleys,
body.d20-premium .issue-toc .galleys_links,
body.d20-premium .issue-toc .galleys,
body.d20-premium .article-summary-galleys {
display: inline-flex !important;
flex-wrap: wrap;
overflow: hidden;
border-radius: 14px;
gap: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* Individual button — purple override */
body.d20-premium .obj_article_summary .galleys_links a,
body.d20-premium .obj_article_summary .galleys a,
body.d20-premium .obj_article_summary .galleys .btn,
body.d20-premium .obj_article_summary .galleys a.btn,
body.d20-premium .obj_article_summary .galleys .obj_galley_link,
body.d20-premium .obj_article_summary .galleys a.obj_galley_link,
body.d20-premium .obj_article_summary .galleys_links .obj_galley_link,
body.d20-premium .issue-toc .galleys_links a,
body.d20-premium .issue-toc .galleys a,
body.d20-premium .issue-toc .galleys .btn,
body.d20-premium .issue-toc .galleys a.btn,
body.d20-premium .issue-toc .galleys .obj_galley_link,
body.d20-premium .issue-toc .galleys a.obj_galley_link,
body.d20-premium .issue-toc .galleys_links .obj_galley_link,
body.d20-premium .article-summary-galleys a {
border-radius: 0 !important;
margin: 0 !important;
border-right: 1px solid rgba(255, 255, 255, 0.18) !important;
color: #fff !important;
background: #3f264d !important;
background-color: #3f264d !important;
padding: 8px 14px !important;
font-weight: 700 !important;
font-size: 13px !important;
text-decoration: none !important;
transition: background 0.18s ease !important;
border-color: rgba(255, 255, 255, 0.18) !important;
border-style: solid !important;
border-width: 0 1px 0 0 !important;
display: inline-flex !important;
align-items: center !important;
line-height: 1.4 !important;
}
/* First child — flat (container handles corners) */
body.d20-premium .obj_article_summary .galleys_links> :first-child,
body.d20-premium .obj_article_summary .galleys_links> :first-child>a,
body.d20-premium .obj_article_summary .galleys> :first-child,
body.d20-premium .issue-toc .galleys_links> :first-child,
body.d20-premium .issue-toc .galleys_links> :first-child>a,
body.d20-premium .issue-toc .galleys> :first-child {
border-radius: 0 !important;
}
/* Last child — flat, no right border */
body.d20-premium .obj_article_summary .galleys_links> :last-child,
body.d20-premium .obj_article_summary .galleys_links> :last-child>a,
body.d20-premium .obj_article_summary .galleys> :last-child,
body.d20-premium .issue-toc .galleys_links> :last-child,
body.d20-premium .issue-toc .galleys_links> :last-child>a,
body.d20-premium .issue-toc .galleys> :last-child {
border-radius: 0 !important;
border-right: none !important;
}
/* Single galley — flat (container handles pill shape) */
body.d20-premium .obj_article_summary .galleys_links> :only-child,
body.d20-premium .obj_article_summary .galleys_links> :only-child>a,
body.d20-premium .obj_article_summary .galleys> :only-child,
body.d20-premium .issue-toc .galleys_links> :only-child,
body.d20-premium .issue-toc .galleys_links> :only-child>a,
body.d20-premium .issue-toc .galleys> :only-child {
border-radius: 0 !important;
border-right: none !important;
}
/* Hover state */
body.d20-premium .obj_article_summary .galleys_links a:hover,
body.d20-premium .obj_article_summary .galleys a:hover,
body.d20-premium .obj_article_summary .galleys .btn:hover,
body.d20-premium .obj_article_summary .galleys a.obj_galley_link:hover,
body.d20-premium .issue-toc .galleys_links a:hover,
body.d20-premium .issue-toc .galleys a:hover,
body.d20-premium .issue-toc .galleys .btn:hover,
body.d20-premium .issue-toc .galleys a.obj_galley_link:hover {
background: #2f1b39 !important;
background-color: #2f1b39 !important;
color: #fff !important;
}
/* Focus visible */
body.d20-premium .obj_article_summary .galleys a:focus-visible,
body.d20-premium .obj_article_summary .galleys_links a:focus-visible,
body.d20-premium .issue-toc .galleys a:focus-visible,
body.d20-premium .issue-toc .galleys_links a:focus-visible {
outline: 2px solid #FFC107 !important;
outline-offset: -2px !important;
}
/* Kill Bootstrap .btn-primary completely inside galley containers */
body.d20-premium .galleys .btn-primary,
body.d20-premium .galleys_links .btn-primary,
body.d20-premium .galleys .btn-default,
body.d20-premium .galleys_links .btn-default {
background: #3f264d !important;
background-color: #3f264d !important;
border-color: rgba(255, 255, 255, 0.18) !important;
color: #fff !important;
}
body.d20-premium .galleys .btn-primary:hover,
body.d20-premium .galleys_links .btn-primary:hover,
body.d20-premium .galleys .btn-default:hover,
body.d20-premium .galleys_links .btn-default:hover {
background: #2f1b39 !important;
background-color: #2f1b39 !important;
color: #fff !important;
}
/* ─── Old header/search rules removed — consolidated in regression block below ─── */
/* =========================================================
D20 REGRESSION FIX BLOCK — 2026-02-27 v20260227-08
Consolidated phases A–F: appended at bottom for cascade safety
========================================================= */
/* ─────────────────────────────────────────────────────────
FIX-A: CURRENT ISSUE on homepage — thumbnail + details flex
───────────────────────────────────────────────────────── */
body.d20-premium.pkp_page_index .current_issue {
display: block !important;
width: 100% !important;
}
body.d20-premium.pkp_page_index .current_issue .issue-toc>.heading.row {
display: flex !important;
flex-wrap: wrap !important;
gap: 18px !important;
align-items: flex-start !important;
}
body.d20-premium.pkp_page_index .current_issue .thumbnail {
flex: 0 0 220px !important;
max-width: 220px !important;
}
body.d20-premium.pkp_page_index .current_issue .thumbnail img {
width: 100% !important;
height: auto !important;
border-radius: 14px !important;
box-shadow: 0 10px 22px rgba(0, 0, 0, .12) !important;
}
body.d20-premium.pkp_page_index .current_issue .issue-details {
flex: 1 1 420px !important;
min-width: 280px !important;
}
/* Issue meta block */
body.d20-premium .d20-issue-meta {
margin-top: 10px;
}
/* Language visibility */
html[lang^="es"] .d20-lang-en {
display: none !important;
}
html[lang^="en"] .d20-lang-es {
display: none !important;
}
/* FIX-A responsive */
@media (max-width: 768px) {
body.d20-premium.pkp_page_index .current_issue .issue-toc>.heading.row {
flex-direction: column !important;
align-items: center !important;
}
body.d20-premium.pkp_page_index .current_issue .thumbnail {
flex: 0 0 auto !important;
max-width: 200px !important;
margin-bottom: 16px !important;
}
body.d20-premium.pkp_page_index .current_issue .issue-details {
min-width: 0 !important;
width: 100% !important;
}
}
/* ─────────────────────────────────────────────────────────
FIX-B: "Número completo" + PDF galley placement
───────────────────────────────────────────────────────── */
body.d20-premium .current_issue .galleys,
body.d20-premium .issue-toc>.galleys {
display: block !important;
clear: both !important;
margin-top: 12px !important;
text-align: left !important;
padding-left: 14px !important;
padding-bottom: 18px !important;
}
body.d20-premium .current_issue .galleys .page-header,
body.d20-premium .issue-toc>.galleys .page-header {
margin: 18px 0 10px !important;
padding: 0 !important;
border: 0 !important;
}
body.d20-premium .current_issue .galleys .btn-group,
body.d20-premium .issue-toc>.galleys .btn-group {
display: inline-flex !important;
flex-wrap: nowrap !important;
border-radius: 12px !important;
overflow: hidden !important;
box-shadow: 0 10px 24px rgba(0, 0, 0, .08) !important;
margin-top: 8px !important;
}
/* ─────────────────────────────────────────────────────────
FIX-C: Segmented galley buttons (PDF/HTML/XML/EPUB)
Theme purple · first rounded-left · last rounded-right
───────────────────────────────────────────────────────── */
body.d20-premium .obj_galley_link,
body.d20-premium .galleys_links a,
body.d20-premium .btn-group .btn,
body.d20-premium .current_issue .galleys .btn,
body.d20-premium .issue-toc>.galleys .btn {
background: var(--d20-purple) !important;
border-color: var(--d20-purple) !important;
color: #fff !important;
font-weight: 700 !important;
}
/* Segmented shape — inner buttons straight, outer rounded */
body.d20-premium .current_issue .galleys .btn,
body.d20-premium .issue-toc>.galleys .btn,
body.d20-premium .obj_article_summary .galleys .btn,
body.d20-premium .obj_article_summary .galleys a.btn,
body.d20-premium .obj_article_summary .galleys .obj_galley_link,
body.d20-premium .obj_article_summary .galleys a.obj_galley_link {
float: none !important;
border-radius: 0 !important;
margin: 0 !important;
padding: 10px 16px !important;
line-height: 1.1 !important;
}
body.d20-premium .current_issue .galleys .btn:first-child,
body.d20-premium .issue-toc>.galleys .btn:first-child {
border-top-left-radius: 12px !important;
border-bottom-left-radius: 12px !important;
}
body.d20-premium .current_issue .galleys .btn:last-child,
body.d20-premium .issue-toc>.galleys .btn:last-child {
border-top-right-radius: 12px !important;
border-bottom-right-radius: 12px !important;
}
/* Hover / focus */
body.d20-premium .obj_galley_link:hover,
body.d20-premium .galleys_links a:hover,
body.d20-premium .btn-group .btn:hover,
body.d20-premium .current_issue .galleys .btn:hover,
body.d20-premium .issue-toc>.galleys .btn:hover {
background: var(--d20-purple-700) !important;
border-color: var(--d20-purple-700) !important;
color: #fff !important;
}
body.d20-premium .current_issue .galleys .btn:focus,
body.d20-premium .issue-toc>.galleys .btn:focus,
body.d20-premium .btn-group .btn:focus {
outline: none !important;
box-shadow: 0 0 0 3px rgba(255, 191, 0, .25) !important;
}
/* Kill Bootstrap .btn-primary / .btn-default inside galleys */
body.d20-premium .galleys .btn-primary,
body.d20-premium .galleys_links .btn-primary,
body.d20-premium .galleys .btn-default,
body.d20-premium .galleys_links .btn-default {
background: var(--d20-purple) !important;
border-color: var(--d20-purple) !important;
color: #fff !important;
}
/* ─────────────────────────────────────────────────────────
FIX-D: Body width — 1180px default, 1320px at ≥1400px
───────────────────────────────────────────────────────── */
body.d20-premium .pkp_structure_content.container,
body.d20-premium .pkp_structure_content .container,
body.d20-premium .pkp_structure_main .container,
body.d20-premium .pkp_structure_main .pkp_structure_content {
max-width: 1180px !important;
width: min(1180px, calc(100% - 48px)) !important;
}
@media (min-width: 1400px) {
body.d20-premium .pkp_structure_content.container,
body.d20-premium .pkp_structure_content .container,
body.d20-premium .pkp_structure_main .container,
body.d20-premium .pkp_structure_main .pkp_structure_content {
max-width: 1400px !important;
width: min(1400px, calc(100% - 48px)) !important;
}
}
/* La barra lateral es col-md-4, asi que crecia en proporcion: a 1920px pasaba
de 500px de ancho. Se le fija un ancho comodo y todo el espacio extra que
se gana al ensanchar la pagina va al cuerpo del articulo. */
@media (min-width: 1400px) {
body.d20-premium .pkp_structure_sidebar {
width: 380px !important;
max-width: 380px !important;
flex: 0 0 380px !important;
}
body.d20-premium .pkp_structure_main {
width: calc(100% - 380px) !important;
max-width: calc(100% - 380px) !important;
flex: 1 1 auto !important;
}
}
/* En pantallas grandes la vista de articulo se quedaba muy contraida: se
aprovecha el ancho disponible sin llegar a lineas de texto ilegibles. */
@media (min-width: 1700px) {
body.d20-premium .pkp_structure_content.container,
body.d20-premium .pkp_structure_content .container,
body.d20-premium .pkp_structure_main .container,
body.d20-premium .pkp_structure_main .pkp_structure_content {
max-width: 1560px !important;
width: min(1560px, calc(100% - 64px)) !important;
}
}
@media (max-width: 768px) {
body.d20-premium .pkp_structure_content.container,
body.d20-premium .pkp_structure_content .container {
width: calc(100% - 24px) !important;
}
}
/* Article summary right padding */
body.d20-premium .obj_article_summary .summary {
padding-right: 18px !important;
}
@media (max-width: 768px) {
body.d20-premium .obj_article_summary .summary {
padding-right: 14px !important;
}
}
/* ─────────────────────────────────────────────────────────
FIX-E: Header — search width + glass/gradient + nowrap
───────────────────────────────────────────────────────── */
/* Search width cap (d20 corporate header) */
body.d20-premium .d20-search-form {
max-width: 320px !important;
width: 100% !important;
flex-shrink: 1 !important;
}
body.d20-premium .d20-search-form input[type="text"] {
max-width: 280px !important;
width: 100% !important;
font-size: 13px !important;
padding: 6px 10px !important;
}
/* Prevent header wrapping */
body.d20-premium #headerNavigationContainer .navbar,
body.d20-premium .d20-navbar .d20-container {
flex-wrap: nowrap !important;
}
body.d20-premium #headerNavigationContainer .navbar-nav,
body.d20-premium .d20-nav-menu {
flex-wrap: nowrap !important;
gap: 18px !important;
}
/* Navbar transition base — smooth 0.45s for premium feel */
body.d20-premium .d20-navbar {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 12001 !important;
transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.45s cubic-bezier(0.4, 0, 0.2, 1),
padding 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Glass at top (not scrolled) — transparent dark with blur */
body.d20-premium .d20-navbar:not(.d20-scrolled) {
background: rgba(10, 8, 12, 0.28) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
box-shadow: none !important;
}
/* Scrolled: solid dark matching footer (#0a0009) */
body.d20-premium .d20-navbar.d20-scrolled {
background: #0a0009 !important;
backdrop-filter: none !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}
/* Hero-at-top: ~2× taller header + ~2× logo with smooth transition */
body.d20-at-top .d20-navbar .d20-container {
padding-top: 22px !important;
padding-bottom: 22px !important;
transition: padding 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body.d20-premium:not(.d20-at-top) .d20-navbar .d20-container {
padding-top: 4px !important;
padding-bottom: 4px !important;
transition: padding 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body.d20-at-top .d20-brand-logo img {
max-height: 90px !important;
transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body.d20-premium:not(.d20-at-top) .d20-brand-logo img {
max-height: 46px !important;
transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Nav link spacing at top */
body.d20-at-top .d20-nav-menu>li>a {
padding-top: 14px !important;
padding-bottom: 14px !important;
transition: padding 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body.d20-premium:not(.d20-at-top) .d20-nav-menu>li>a {
padding-top: 8px !important;
padding-bottom: 8px !important;
transition: padding 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Search + user actions also transition smoothly */
body.d20-at-top .d20-search-form button,
body.d20-at-top .d20-user-actions {
transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Mobile: disable hero scaling — keep compact */
@media (max-width: 991px) {
body.d20-at-top .d20-brand-logo img {
max-height: 40px !important;
}
body.d20-at-top .d20-navbar .d20-container {
padding-top: 6px !important;
padding-bottom: 6px !important;
}
body.d20-at-top .d20-nav-menu>li>a {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
body.d20-premium .d20-search-form {
max-width: 100% !important;
}
body.d20-premium .d20-search-form input[type="text"] {
max-width: 100% !important;
}
}
/* Extra coverage for OJS default nav (pkp_site_nav_menu / header.navbar) */
body.d20-premium .pkp_site_nav_menu,
body.d20-premium header.navbar {
background: #0a0009 !important;
backdrop-filter: none !important;
}
body.d20-premium:not(.d20-scrolled):not(.is-scrolled):not(.header-scrolled) .pkp_site_nav_menu,
body.d20-premium:not(.d20-scrolled):not(.is-scrolled):not(.header-scrolled) header.navbar {
background: rgba(10, 8, 12, 0.28) !important;
padding-top: 18px !important;
padding-bottom: 18px !important;
}
body.d20-premium:not(.d20-scrolled):not(.is-scrolled):not(.header-scrolled) .pkp_site_name,
body.d20-premium:not(.d20-scrolled):not(.is-scrolled):not(.header-scrolled) .navbar-brand {
transform: scale(1.15) !important;
transform-origin: left center !important;
}
body.d20-premium .pkp_site_nav_menu .search,
body.d20-premium header.navbar .search {
max-width: 320px !important;
}
body.d20-premium .pkp_site_nav_menu input[type="search"],
body.d20-premium header.navbar input[type="search"],
body.d20-premium .pkp_site_nav_menu input[name="query"],
body.d20-premium header.navbar input[name="query"] {
width: 100% !important;
max-width: 320px !important;
}
@media (max-width: 1200px) {
body.d20-premium .pkp_site_nav_menu .search,
body.d20-premium header.navbar .search {
max-width: 240px !important;
}
body.d20-premium .pkp_site_nav_menu input[name="query"],
body.d20-premium header.navbar input[name="query"] {
max-width: 240px !important;
}
}
/* FIX-G galley buttons — see AUTHORITATIVE block above */
/* ─────────────────────────────────────────────────────────
FIX-H: Banner/Index carousels — prevent height-doubling flash
during Bootstrap 3 slide transitions
───────────────────────────────────────────────────────── */
body.d20-premium #myCarousel .carousel-inner,
body.d20-premium #indexCarousel .carousel-inner {
position: relative !important;
overflow: hidden !important;
}
body.d20-premium #myCarousel .carousel-inner>.item.next,
body.d20-premium #myCarousel .carousel-inner>.item.prev,
body.d20-premium #indexCarousel .carousel-inner>.item.next,
body.d20-premium #indexCarousel .carousel-inner>.item.prev {
position: absolute !important;
top: 0 !important;
width: 100% !important;
}
/* Back-to-top — defined in d20-corporate.css */
/* ============================================================
D20 FIX: Galley buttons unified (PDF/HTML/XML/EPUB)
Actual OJS markup: div.btn-group > a.galley-link.btn.btn-primary
- purple premium style
- pill shape: first-child left rounding, last-child right rounding
============================================================ */
/* --- btn-group container --- */
body.d20-premium .btn-group,
body.d20-premium .article-summary .btn-group,
body.d20-premium .issue-toc .btn-group,
body.d20-premium .galleys .btn-group,
body.d20-premium .galleys_links .btn-group {
display: inline-flex !important;
align-items: stretch !important;
flex-wrap: nowrap !important;
border-radius: 14px !important;
overflow: visible !important;
gap: 0 !important;
}
/* --- ALL galley links: purple + straight edges (base) --- */
body.d20-premium .btn-group>a,
body.d20-premium .btn-group>a.btn,
body.d20-premium .btn-group>a.btn-primary,
body.d20-premium .btn-group>a.btn-secondary,
body.d20-premium .btn-group>a.btn-default,
body.d20-premium .btn-group>a.galley-link,
body.d20-premium a.galley-link,
body.d20-premium a.obj_galley_link,
body.d20-premium .galleys_links a,
body.d20-premium ul.galleys_links a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: #3b2352 !important;
color: #ffffff !important;
border: 1px solid #3b2352 !important;
border-radius: 0 !important;
padding: 10px 18px !important;
line-height: 1 !important;
text-decoration: none !important;
white-space: nowrap !important;
box-shadow: none !important;
margin: 0 !important;
font-weight: 700 !important;
}
/* inner border collapse (avoid double borders) */
body.d20-premium .btn-group>a+a,
body.d20-premium .btn-group>a.galley-link+a.galley-link {
border-left-width: 0 !important;
}
/* --- PILL: left rounding on FIRST child (PDF) --- */
body.d20-premium .btn-group>a:first-child,
body.d20-premium .btn-group>a.galley-link:first-child {
border-top-left-radius: 14px !important;
border-bottom-left-radius: 14px !important;
}
/* --- PILL: right rounding on LAST child (EPUB) --- */
body.d20-premium .btn-group>a:last-child,
body.d20-premium .btn-group>a.galley-link:last-child {
border-top-right-radius: 14px !important;
border-bottom-right-radius: 14px !important;
}
/* --- hover --- */
body.d20-premium .btn-group>a:hover,
body.d20-premium a.galley-link:hover,
body.d20-premium a.obj_galley_link:hover,
body.d20-premium .galleys_links a:hover {
filter: brightness(1.12) !important;
color: #fff !important;
}
/* --- ul.galleys_links fallback (if OJS uses list markup) --- */
body.d20-premium ul.galleys_links {
list-style: none !important;
padding: 0 !important;
margin: 10px 0 0 0 !important;
display: inline-flex !important;
flex-wrap: nowrap !important;
gap: 0 !important;
border-radius: 14px !important;
overflow: visible !important;
}
body.d20-premium ul.galleys_links>li {
margin: 0 !important;
padding: 0 !important;
display: inline-flex !important;
}
body.d20-premium ul.galleys_links>li>a+a,
body.d20-premium ul.galleys_links>li+li>a {
border-left-width: 0 !important;
}
body.d20-premium ul.galleys_links>li:first-child>a {
border-top-left-radius: 14px !important;
border-bottom-left-radius: 14px !important;
}
body.d20-premium ul.galleys_links>li:last-child>a {
border-top-right-radius: 14px !important;
border-bottom-right-radius: 14px !important;
}
/* ============================================================
D20 FIX: Index-only RIGHT padding for article cards
Actual markup: div.article-summary.media > div.media-body
(NOT .obj_article_summary)
Scoped to body.d20-premium.pkp_page_index only.
============================================================ */
/* Box-sizing safety net */
body.d20-premium.pkp_page_index .article-summary,
body.d20-premium.pkp_page_index .article-summary .media-body,
body.d20-premium.pkp_page_index .article-summary .btn-group,
body.d20-premium.pkp_page_index .article-summary .meta,
body.d20-premium.pkp_page_index .obj_article_summary,
body.d20-premium.pkp_page_index .obj_article_summary .media-body {
box-sizing: border-box !important;
}
/* Breathing room on right side of the card */
body.d20-premium.pkp_page_index .article-summary,
body.d20-premium.pkp_page_index .obj_article_summary {
padding-right: 22px !important;
}
/* Breathing room on the media-body (text area) */
body.d20-premium.pkp_page_index .article-summary .media-body,
body.d20-premium.pkp_page_index .obj_article_summary .media-body {
padding-right: 14px !important;
}
/* Prevent clipping */
body.d20-premium.pkp_page_index .article-summary,
body.d20-premium.pkp_page_index .article-summary .media-body,
body.d20-premium.pkp_page_index .article-summary .btn-group,
body.d20-premium.pkp_page_index .obj_article_summary,
body.d20-premium.pkp_page_index .obj_article_summary .media-body {
overflow: visible !important;
}
/* =========================================================
D20 FIX: index article galleys overflow (buttons row)
Objetivo: evitar que los botones se salgan del card
Alcance: SOLO index (homepage issue TOC listing)
========================================================= */
/* =========================================================
D20 FIX: index galleys overflow — FORCE FLEX (v2)
Reason A didn't flex: your markup is NOT using .btn-group
or the theme sets floats/inline-block on li/a.
Scope: ONLY homepage index
========================================================= */
/* 1) Hit ALL common OJS galleys containers (btn-group OR ul/li variants) */
body.d20-premium.pkp_page_index .issue-toc .galleys .btn-group,
body.d20-premium.pkp_page_index .issue-toc .galleys .galleys_links,
body.d20-premium.pkp_page_index .issue-toc .galleys .galleys,
body.d20-premium.pkp_page_index .issue-toc .galleys ul,
body.d20-premium.pkp_page_index .issue-toc .galleys ol {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
max-width: 100% !important;
padding-left: 0 !important;
margin: 10px 0 0 !important;
list-style: none !important;
overflow: hidden !important;
}
/* 2) Neutralize float/inline-block rules that prevent wrapping */
body.d20-premium.pkp_page_index .issue-toc .galleys li,
body.d20-premium.pkp_page_index .issue-toc .galleys_links li {
float: none !important;
display: contents !important;
/* lets the anchor behave as the flex item */
}
/* 3) Make anchors behave like “buttons” and wrap correctly */
body.d20-premium.pkp_page_index .issue-toc .galleys a,
body.d20-premium.pkp_page_index .issue-toc .galleys_links a,
body.d20-premium.pkp_page_index .issue-toc .galleys .btn-group a,
body.d20-premium.pkp_page_index .issue-toc .galleys .btn-group .btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 1 1 220px !important;
/* desktop: 2-ish per row */
min-width: 160px !important;
max-width: 100% !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
box-sizing: border-box !important;
}
/* 4) Mobile: stack */
@media (max-width: 640px) {
body.d20-premium.pkp_page_index .issue-toc .galleys a,
body.d20-premium.pkp_page_index .issue-toc .galleys_links a,
body.d20-premium.pkp_page_index .issue-toc .galleys .btn-group a,
body.d20-premium.pkp_page_index .issue-toc .galleys .btn-group .btn {
flex-basis: 100% !important;
min-width: 0 !important;
}
}
/* ═══════════════════════════════════════════════════════
END D20 REGRESSION FIX BLOCK — 2026-02-27 v20260227-18
═══════════════════════════════════════════════════════ */
/* =========================================================================
SCOPED REDESIGN: About the Journal Page (Homepage Block HERO CARD)
Applies only within .rtd-about-wrap on the homepage index
========================================================================= */
body.d20-premium.pkp_page_index .rtd-about-wrap {
--rtd-primary: var(--d20-purple, #3f264d);
--rtd-primary-gradient: linear-gradient(135deg, #3f264d 0%, #2f1b39 100%);
--rtd-bg-color: #ffffff;
--rtd-border-color: rgba(63, 38, 77, 0.08);
--rtd-shadow: 0 12px 30px rgba(31, 18, 41, 0.08), 0 4px 10px rgba(0, 0, 0, 0.03);
--rtd-shadow-hover: 0 16px 40px rgba(31, 18, 41, 0.12), 0 6px 14px rgba(0, 0, 0, 0.05);
--rtd-text-main: #343a40;
--rtd-text-muted: #6c757d;
--rtd-accent: var(--d20-gold, #c9a227);
--rtd-callout-bg: #fdfbf7;
--rtd-callout-border: var(--d20-gold, #c9a227);
--rtd-callout-text: #594d23;
font-family: inherit;
margin: 2.5rem 0;
max-width: 100%;
line-height: 1.7;
}
body.d20-premium.pkp_page_index .rtd-about-wrap .rtd-about-card {
background-color: var(--rtd-bg-color);
border: 1px solid var(--rtd-border-color);
border-radius: 16px;
box-shadow: var(--rtd-shadow);
overflow: hidden;
transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
}
body.d20-premium.pkp_page_index .rtd-about-wrap .rtd-about-card:hover {
transform: translateY(-4px);
box-shadow: var(--rtd-shadow-hover);
}
/* Hero Header Band */
body.d20-premium.pkp_page_index .rtd-about-wrap .rtd-about-header {
background: var(--rtd-primary-gradient);
padding: 1.8rem 2.5rem;
border-bottom: 4px solid var(--rtd-accent);
}
body.d20-premium.pkp_page_index .rtd-about-wrap .rtd-about-title {
font-size: clamp(1.8rem, 2.5vw, 2.2rem) !important;
font-weight: 800 !important;
color: #ffffff !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
letter-spacing: -0.3px !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
body.d20-premium.pkp_page_index .rtd-about-wrap .rtd-title-icon {
margin-right: 12px;
font-size: 1.2em;
line-height: 1;
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}
body.d20-premium.pkp_page_index .rtd-about-wrap .rtd-divider {
flex-grow: 1;
height: 2px;
background-color: rgba(255, 255, 255, 0.2);
margin-left: 1.5rem;
border-radius: 2px;
}
/* Rich Text Content Area */
body.d20-premium.pkp_page_index .rtd-about-wrap .rtd-about-content {
padding: 2.5rem;
color: var(--rtd-text-main);
font-size: 1.1rem;
}
body.d20-premium.pkp_page_index .rtd-about-wrap .rtd-about-content p {
margin-bottom: 1.25rem;
color: inherit;
line-height: 1.7;
}
body.d20-premium.pkp_page_index .rtd-about-wrap .rtd-about-content p:last-child {
margin-bottom: 0;
}
/* Styled Callout Box within content */
body.d20-premium.pkp_page_index .rtd-about-wrap .rtd-callout,
body.d20-premium.pkp_page_index .rtd-about-wrap .rtd-about-content blockquote {
background-color: var(--rtd-callout-bg);
border-left: 6px solid var(--rtd-callout-border);
color: var(--rtd-callout-text);
padding: 1.5rem 1.8rem;
border-radius: 0 10px 10px 0;
margin: 2rem 0;
font-size: 1.05rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
font-style: normal;
}
/* Styling native lists in the editor as nice checklists */
body.d20-premium.pkp_page_index .rtd-about-wrap .rtd-about-content ul {
list-style: none;
padding-left: 0;
margin: 1.8rem 0;
}
body.d20-premium.pkp_page_index .rtd-about-wrap .rtd-about-content ul li {
position: relative;
padding-left: 32px;
margin-bottom: 1rem;
color: inherit;
}
body.d20-premium.pkp_page_index .rtd-about-wrap .rtd-about-content ul li::before {
content: "✔";
/* Unicode Default Checkmark */
position: absolute;
left: 0;
top: 2px;
color: #28a745;
font-size: 1.1rem;
font-weight: bold;
}
/* Mobile Adjustments */
@media (max-width: 768px) {
body.d20-premium.pkp_page_index .rtd-about-wrap .rtd-about-header {
padding: 1.5rem;
}
body.d20-premium.pkp_page_index .rtd-about-wrap .rtd-about-content {
padding: 1.5rem;
}
body.d20-premium.pkp_page_index .rtd-about-wrap .rtd-divider {
display: none;
/* Hide line on small screens to save space */
}
}
/* =========================================================
DESIGN PASS 2 — Visual Bug Fixes 2026-03-10
========================================================= */
/* ─── FIX P2-A: Article detail galley buttons (.download) ─── */
body.d20-premium .article-sidebar .download {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
margin-top: 12px !important;
margin-bottom: 16px !important;
}
body.d20-premium .article-sidebar .download .galley-link {
flex: 1 1 calc(50% - 3px) !important;
min-width: 80px !important;
border-radius: var(--d20-radius-sm, 8px) !important;
background: var(--d20-purple, #3f264d) !important;
color: #fff !important;
text-align: center !important;
padding: 10px 14px !important;
font-weight: 700 !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
text-decoration: none !important;
transition: transform 0.18s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}
body.d20-premium .article-sidebar .download .galley-link:hover {
background: var(--d20-purple-700, #2f1b39) !important;
color: #fff !important;
transform: translateY(-1px) !important;
box-shadow: 0 8px 18px rgba(63, 38, 77, 0.25) !important;
}
/* ─── FIX P2-B: Sidebar "Enviar un artículo" contrast ─── */
body.d20-premium .pkp_block .btn,
body.d20-premium .pkp_block .btn-default,
body.d20-premium .pkp_block a.btn,
body.d20-premium .pkp_block a.btn-default,
body.d20-premium .sidebar .btn,
body.d20-premium .sidebar .btn-default {
background: var(--d20-purple, #3f264d) !important;
color: #fff !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: var(--d20-radius-sm, 8px) !important;
font-weight: 700 !important;
padding: 12px 18px !important;
text-decoration: none !important;
display: block !important;
text-align: center !important;
}
body.d20-premium .pkp_block .btn:hover,
body.d20-premium .pkp_block .btn-default:hover,
body.d20-premium .sidebar .btn:hover,
body.d20-premium .sidebar .btn-default:hover {
background: var(--d20-purple-700, #2f1b39) !important;
color: #fff !important;
box-shadow: 0 8px 18px rgba(63, 38, 77, 0.25) !important;
}
/* ─── FIX P2-C: Sidebar section headers — force white text ─── */
body.d20-premium .pkp_block .d20-section-header,
body.d20-premium .sidebar .d20-section-header,
body.d20-premium .pkp_block h3,
body.d20-premium .sidebar h3 {
color: var(--d20-text, #1e1e2f) !important;
}
/* Headings that use a purple BG must have white text — scoped to h-tags & spans only */
body.d20-premium .pkp_block h1[style*="background"],
body.d20-premium .pkp_block h2[style*="background"],
body.d20-premium .pkp_block h3[style*="background"],
body.d20-premium .pkp_block h4[style*="background"],
body.d20-premium .pkp_block span[style*="background"],
body.d20-premium .sidebar h1[style*="background"],
body.d20-premium .sidebar h2[style*="background"],
body.d20-premium .sidebar h3[style*="background"],
body.d20-premium .sidebar span[style*="background"] {
color: #fff !important;
}
body.d20-premium .d20-section-header,
body.d20-premium .d20-section-header--index {
color: #fff !important;
}
/* ─── FIX P2-D: Author detail icons — unified purple ─── */
body.d20-premium .d20-author-icon {
color: var(--d20-purple, #3f264d);
}
/* =========================================================
MIGRATED FROM legacy styleSheet.css (OJS custom upload)
These styles support custom HTML content in OJS pages
(Editorial Team, About, Issue TOC, sidebar blocks).
Safe to keep — they are scoped and don't conflict.
========================================================= */
/* ─── Editorial Team / Committees ─── */
.ojs-committees{max-width:1100px;margin:20px auto;padding:0 10px;font-family:"Inter","Segoe UI","Helvetica Neue",Arial,sans-serif;}
.ojs-committees .committee{margin:0 0 18px 0;}
.ojs-committees .committee-title{
background:#5e4862;color:#fff;font-weight:700;
padding:14px 18px;border-radius:6px;
box-shadow:0 2px 0 rgba(0,0,0,.06);
}
.ojs-committees .committee-body{
background:#fff;border:1px solid #e6e0ea;border-top:0;
border-radius:0 0 6px 6px;padding:16px;
}
.ojs-committees .person-card{
border:1px solid #ece7f0;border-left:4px solid #C9A227;
border-radius:6px;background:#fff;
margin:0 0 14px 0;overflow:hidden;
padding:20px 20px 10px 20px;
}
.ojs-committees .person-header{margin-bottom:15px;}
.ojs-committees .person-left{text-align:center;padding-bottom:15px;}
.ojs-committees .person-avatar{
width:110px;height:110px;border-radius:50%;
display:inline-block;border:4px solid #fff;
box-shadow:0 2px 10px rgba(0,0,0,.10);
object-fit:cover;
}
@media (min-width:768px){
.ojs-committees .person-left{text-align:left;padding-bottom:0;}
.ojs-committees .person-right{padding-left:15px;}
}
.ojs-committees .person-name{font-size:18px;font-weight:800;color:#3b2f3f;margin:0 0 4px 0;line-height:1.2;}
.ojs-committees .person-role{font-weight:700;color:#5e4862;margin-bottom:8px;text-transform:uppercase;font-size:12px;}
.ojs-committees .person-affiliation{margin-bottom:8px;}
.ojs-committees .person-institution{font-weight:600;color:#3b2f3f;}
.ojs-committees .person-location{color:#6b6b6b;font-size:13px;margin-top:2px;}
.ojs-committees .ror-link{display:inline-block;margin-left:6px;vertical-align:middle;}
.ojs-committees .ror-icon{width:16px;height:16px;opacity:.85;vertical-align:middle;}
.ojs-committees .person-contact{font-size:14px;margin-bottom:12px;color:#3b2f3f;}
.ojs-committees .person-contact a{color:#5e4862;text-decoration:none;font-weight:600;}
.ojs-committees .person-contact a:hover{text-decoration:underline;color:#C9A227;}
.ojs-committees .person-chips{margin-bottom:10px;}
.ojs-committees .chip{
display:inline-block;background:#f4f1f8;border:1px solid #e6e0ea;
color:#5e4862;border-radius:18px;
padding:6px 10px;margin:0 8px 8px 0;
text-decoration:none;font-weight:600;font-size:12px;
}
.ojs-committees .chip:hover{border-color:#C9A227;color:#3b2f3f;}
.ojs-committees .person-bio{line-height:1.65;color:#2b2b2b;border-top:1px solid #eee;padding-top:15px;}
.ojs-committees .person-bio p{margin:0 0 10px 0;}
.ojs-committees .person-bio p:last-child{margin-bottom:0;}
.ojs-committees .person-meta-block{
background:#f4f1f8;border:1px solid #e6e0ea;border-left:4px solid #C9A227;
border-radius:6px;padding:10px 12px;margin:12px 0 14px 0;
}
.ojs-committees .person-meta-block .meta-title{
font-weight:800;color:#3b2f3f;text-transform:uppercase;font-size:11px;letter-spacing:.02em;
margin:0 0 6px 0;
}
.ojs-committees .person-meta-block p{margin:0;color:#2b2b2b;line-height:1.55;}
.ojs-committees .bio-details{margin-top:10px;}
.ojs-committees .bio-details > summary{
cursor:pointer;user-select:none;
display:inline-block;padding:6px 10px;border-radius:16px;
background:#f4f1f8;border:1px solid #e6e0ea;color:#5e4862;
font-weight:700;font-size:12px;
}
.ojs-committees .bio-details[open] > summary{border-color:#C9A227;color:#3b2f3f;}
.ojs-committees .bio-details > summary::-webkit-details-marker{display:none;}
.ojs-committees .bio-details .person-bio-inner{margin-top:10px;}
/* ─── Issue Metadata Table ─── */
.rtd-meta{
max-width:1100px;margin:18px 0;padding:18px;
background:#fbf7f1;border-radius:14px;
box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.rtd-meta__grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;}
.rtd-box{background:#fff;border:1px solid rgba(35,20,40,.12);border-radius:12px;padding:16px 16px 8px;}
.rtd-title{margin:0 0 10px 0;font-weight:800;color:#4f2f5a;font-size:18px;letter-spacing:.2px;}
.rtd-row{display:grid;grid-template-columns:220px 1fr;gap:14px;padding:10px 0;border-bottom:1px solid rgba(35,20,40,.10);}
.rtd-row:last-child{border-bottom:none;}
.rtd-k{font-weight:800;color:#222;}
.rtd-v{color:rgba(31,31,31,.85);word-break:break-word;}
@media (max-width:900px){
.rtd-meta__grid{grid-template-columns:1fr;}
.rtd-row{grid-template-columns:1fr;}
}
/* ─── Donut Chart (About page) ─── */
.rted-donut-chart{
width:250px;height:250px;border-radius:50%;
position:relative;display:flex;align-items:center;justify-content:center;
background:conic-gradient(
#e67e22 0% 30%,#5a466a 30% 50%,#7f8c8d 50% 65%,
#2c3e50 65% 79%,#ffcc00 79% 89%,#bdc3c7 89% 100%
);
box-shadow:0 4px 10px rgba(0,0,0,0.1);margin:20px auto;
}
.rted-donut-chart::before{
content:"RTED";position:absolute;width:150px;height:150px;
background-color:white;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-weight:bold;color:#5a466a;font-size:1.6em;z-index:5;
}
.pct-label{position:absolute;font-weight:bold;font-size:14px;color:white;z-index:10;}
.p30{top:65px;right:45px;}.p20{bottom:55px;right:55px;}
.p15{bottom:45px;left:80px;}.p14{top:110px;left:25px;}
.p10{top:45px;left:95px;color:#5a466a;}
.legend-container{width:100%;margin-top:20px;}
.legend-line{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.legend-text{display:flex;align-items:center;text-align:left !important;}
.dot{font-size:20px;margin-right:8px;line-height:1;}
/* ─── ORCID Icon ─── */
.orcid_icon{width:16px;height:16px;}
/* =========================================================
Article Metrics Widget (main content — Citations / Views / Altmetric)
========================================================= */
.d20-metrics-section {
margin-top: 24px;
}
.d20-metrics-widget {
background: #fff;
border: 1px solid #e6e0ea;
border-radius: 10px;
padding: 28px 24px 20px;
margin: 16px 0 24px;
text-align: center;
box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.d20-metrics-row {
display: flex !important;
flex-direction: row !important;
justify-content: center;
align-items: flex-start;
gap: 40px;
flex-wrap: nowrap;
}
.d20-metric-item {
display: flex;
flex-direction: column;
align-items: center;
flex: 0 0 auto;
min-width: 100px;
}
.d20-metric-label {
display: block;
margin-top: 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.2px;
color: #555;
text-transform: uppercase;
}
/* Views circle — navy style */
.d20-views-circle {
width: 90px;
height: 90px;
border-radius: 50%;
background: #1b2a4a;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 3px 10px rgba(27,42,74,.35);
}
.d20-views-number {
color: #fff;
font-size: 18px;
font-weight: 800;
letter-spacing: .3px;
}
/* PlumX badge container */
.d20-metric-plumx {
min-height: 90px;
display: flex;
align-items: center;
justify-content: center;
}
/* Altmetric badge container */
.d20-metric-altmetric {
min-height: 90px;
display: flex;
align-items: center;
justify-content: center;
}
.d20-metric-altmetric .altmetric-embed {
display: inline-block;
}
/* Hide the Altmetric item entirely when the badge has no data */
.d20-metric-item:has(.altmetric-embed[style*="display: none"]),
.d20-metric-item:has(.altmetric-embed:empty) {
display: none;
}
/* Dimensions badge container */
.d20-metric-dimensions {
min-height: 90px;
display: flex;
align-items: center;
justify-content: center;
}
.d20-metric-dimensions a {
text-decoration: none !important;
}
/* Footer link */
.d20-metrics-footer {
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid #eee;
}
.d20-metrics-footer a {
color: #555;
font-size: 13px;
text-decoration: none;
}
.d20-metrics-footer a:hover {
color: #3f264d;
text-decoration: underline;
}
.d20-metrics-footer .fa-info-circle {
color: #1b2a4a;
margin-right: 4px;
}
/* Responsive: stack on small screens */
@media (max-width: 576px) {
.d20-metrics-row {
flex-wrap: wrap !important;
gap: 20px;
}
.d20-views-circle { width: 70px; height: 70px; }
.d20-views-number { font-size: 15px; }
}
/* =========================================================
FIX BATCH — 2026-03-12
1. CTA dark-on-dark text
2. Dropdown menus hidden behind panels
3. Keywords missing separators
4. Sidebar blocks consistent sizing
5. Sidebar top alignment with main content
6. Navbar solid on inner pages
7. Downloads chart & Métricas table styling
8. Plantillas para Autores — stacked rows
========================================================= */
/* ─── 1. Community CTA: dark text on light bg ─── */
body.d20-premium .d20-community-cta__title,
body.d20-premium h3.d20-community-cta__title {
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
}
/* ─── 2. How-to-cite dropdowns clipped by overflow ─── */
body.d20-premium .how-to-cite .panel-body {
overflow: visible !important;
}
body.d20-premium .how-to-cite .btn-group {
position: relative;
z-index: 10;
}
body.d20-premium .how-to-cite .dropdown-menu {
z-index: 1050;
}
body.d20-premium .article-more-details {
overflow: visible !important;
}
body.d20-premium .article-more-details .panel {
overflow: visible !important;
}
/* ─── 3. Keywords — see d20-keywords-list rules in section 11 ─── */
/* ─── 4. Sidebar blocks: consistent sizing ─── */
/* Override Bootstrap .panel, .panel-default, .panel-body, .list-group, .list-group-item */
body.d20-premium .pkp_structure_sidebar .pkp_block {
margin: 0 0 20px !important;
overflow: hidden !important;
border: 1px solid var(--d20-border) !important;
border-radius: var(--d20-radius) !important;
box-shadow: var(--d20-shadow) !important;
background: var(--d20-card) !important;
padding: 0 !important;
}
body.d20-premium .pkp_structure_sidebar .pkp_block .content {
padding: 16px 18px !important;
border: none !important;
border-top: none !important;
font-size: 14.5px !important;
}
body.d20-premium .pkp_structure_sidebar .pkp_block .content a {
font-size: 14.5px !important;
}
body.d20-premium .pkp_structure_sidebar .pkp_block .content ul {
margin: 0 !important;
padding: 0 0 0 4px !important;
list-style: none !important;
border: none !important;
}
body.d20-premium .pkp_structure_sidebar .pkp_block .content li {
padding: 10px 0 !important;
border: none !important;
border-bottom: 1px solid var(--d20-border) !important;
background: none !important;
font-size: 14.5px !important;
}
body.d20-premium .pkp_structure_sidebar .pkp_block .content li a {
font-size: 14.5px !important;
}
body.d20-premium .pkp_structure_sidebar .pkp_block .content li:last-child {
border-bottom: none;
}
/* ─── 5. Sidebar: clear fixed navbar on all pages ─── */
body.d20-premium .pkp_structure_sidebar {
padding-top: 70px !important;
}
body.d20-premium.pkp_page_index .pkp_structure_sidebar {
padding-top: 27px !important;
}
/* ─── 6. Navbar: solid bg on all pages except index ─── */
body.d20-premium:not(.pkp_page_index) .d20-navbar {
background: rgba(8, 5, 10, 0.97) !important;
height: 56px;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body.d20-premium:not(.pkp_page_index) .d20-navbar .d20-nav-menu>li>a {
height: 56px;
}
body.d20-premium:not(.pkp_page_index) .d20-navbar .d20-brand-logo img {
max-height: 46px;
}
/* ─── 7. Downloads chart & Métricas table ─── */
body.d20-premium .item.downloads_chart {
margin: 24px 0;
padding: 20px;
background: #fff;
border: 1px solid var(--d20-border);
border-radius: var(--d20-radius);
box-shadow: var(--d20-shadow);
}
body.d20-premium .item.downloads_chart .label {
font-size: 18px;
font-weight: 800;
color: var(--d20-text);
margin: 0 0 16px;
padding: 0;
border: none;
background: none;
}
body.d20-premium .item.downloads_chart canvas {
max-width: 100%;
}
/* Métricas table below chart */
body.d20-premium .item.galleyViews {
margin: 0;
padding: 0;
background: #fff;
border: 1px solid var(--d20-border);
border-radius: var(--d20-radius);
box-shadow: var(--d20-shadow);
overflow: hidden;
}
body.d20-premium .item.galleyViews > .label {
display: block !important;
font-size: 15px !important;
font-weight: 800 !important;
color: #fff !important;
background: var(--d20-purple) !important;
border-radius: 0 !important;
padding: 12px 18px !important;
margin: 0 !important;
border: none !important;
line-height: 1.3;
letter-spacing: 0.2px;
}
body.d20-premium .item.galleyViews .sub_item {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 14px 18px !important;
border-bottom: 1px solid var(--d20-border);
margin: 0 !important;
}
body.d20-premium .item.galleyViews .sub_item:last-child {
border-bottom: none;
}
body.d20-premium .item.galleyViews .sub_item:nth-child(even) {
background: #f9f8fc;
}
body.d20-premium .item.galleyViews .sub_item .label {
display: inline !important;
font-size: 14px !important;
font-weight: 600 !important;
color: var(--d20-text) !important;
background: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
white-space: normal !important;
flex: 1 1 auto;
line-height: 1.4;
}
body.d20-premium .item.galleyViews .sub_item .value {
font-size: 17px;
font-weight: 800;
color: var(--d20-purple);
text-align: right;
flex-shrink: 0;
padding-left: 16px;
min-width: 60px;
}
/* ─── 8. Plantillas para Autores: stack links in rows ─── */
body.d20-premium .pkp_block .content a[href*=".doc"],
body.d20-premium .pkp_block .content a[href*=".pdf"],
body.d20-premium .pkp_block .content a[href*="plantilla"],
body.d20-premium .pkp_block .content a[href*="Plantilla"],
body.d20-premium .pkp_block .content a[href*="Declaracion"],
body.d20-premium .pkp_block .content a[href*="declaracion"] {
display: block;
padding: 8px 0;
border-bottom: 1px solid var(--d20-border);
}
body.d20-premium .pkp_block .content a[href*=".doc"]:last-child,
body.d20-premium .pkp_block .content a[href*=".pdf"]:last-child,
body.d20-premium .pkp_block .content a[href*="Declaracion"]:last-child,
body.d20-premium .pkp_block .content a[href*="declaracion"]:last-child {
border-bottom: none;
}
/* ─── 9. Sidebar block titles: unified style with left accent ─── */
/* Override Bootstrap .panel-heading, .panel-default > .panel-heading */
body.d20-premium .pkp_structure_sidebar .pkp_block h2.title:not(.pkp_screen_reader) {
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
padding: 10px 14px !important;
margin: 0 !important;
color: #fff !important;
background: linear-gradient(135deg, #3f264d 0%, #5e4862 100%) !important;
border: none !important;
border-bottom: 3px solid var(--d20-gold, #c9a227) !important;
border-radius: 0 !important;
position: relative !important;
text-transform: none !important;
}
body.d20-premium .pkp_structure_sidebar .pkp_block h2.title::before {
content: none !important;
}
/* ─── 9b. Sidebar content headings — match block title style ─── */
body.d20-premium .pkp_structure_sidebar .pkp_block .content h1,
body.d20-premium .pkp_structure_sidebar .pkp_block .content h2,
body.d20-premium .pkp_structure_sidebar .pkp_block .content h3 {
font-size: 1.15rem !important;
font-weight: 800 !important;
line-height: 1.35 !important;
color: #1b2540 !important;
background: #f8f9fc !important;
border: none !important;
border-bottom: 1px solid rgba(63, 38, 77, 0.12) !important;
border-radius: 0 !important;
margin: 0 -18px !important;
padding: 12px 18px 12px 22px !important;
position: relative !important;
}
/* Left accent via pseudo-element */
body.d20-premium .pkp_structure_sidebar .pkp_block .content h1::before,
body.d20-premium .pkp_structure_sidebar .pkp_block .content h2::before,
body.d20-premium .pkp_structure_sidebar .pkp_block .content h3::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
bottom: 0 !important;
width: 4px !important;
background: var(--d20-purple) !important;
}
body.d20-premium .pkp_structure_sidebar .pkp_block .content h1:first-child,
body.d20-premium .pkp_structure_sidebar .pkp_block .content h2:first-child,
body.d20-premium .pkp_structure_sidebar .pkp_block .content h3:first-child {
margin-top: -16px !important;
}
/* ─── 9c. Sidebar block content paragraphs & links ─── */
body.d20-premium .pkp_structure_sidebar .pkp_block .content p {
margin: 6px 0 !important;
font-size: 14.5px !important;
line-height: 1.55 !important;
}
body.d20-premium .pkp_structure_sidebar .pkp_block .content ul {
padding-left: 18px !important;
margin: 6px 0 !important;
}
body.d20-premium .pkp_structure_sidebar .pkp_block .content ul li {
padding: 10px 0 !important;
font-size: 14.5px !important;
border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
body.d20-premium .pkp_structure_sidebar .pkp_block .content ul li:last-child {
border-bottom: none !important;
}
/* ─── 9d. Estadísticas / Indicadores — premium progress bars ─── */
/* Progress bar containers (p tags with inline background-color).
Se excluye #5e4862: esos no son barras, son los encabezados morados
de los bloques personalizados y los unifica la seccion del final. */
body.d20-premium .pkp_structure_sidebar .pkp_block .content p[style*="background"]:not([style*="5e4862"]) {
border-radius: 6px !important;
font-size: 13px !important;
font-weight: 700 !important;
color: #fff !important;
padding: 6px 16px !important;
margin: 2px 0 16px !important;
min-height: 30px !important;
display: flex !important;
align-items: center !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 4px rgba(0,0,0,0.10) !important;
}
/* Override green progress bars to a modern gradient */
body.d20-premium .pkp_structure_sidebar .pkp_block .content p[style*="background-color: green"],
body.d20-premium .pkp_structure_sidebar .pkp_block .content p[style*="background-color:green"] {
background: linear-gradient(135deg, #34c759 0%, #2ba84a 100%) !important;
}
/* Override blue progress bars */
body.d20-premium .pkp_structure_sidebar .pkp_block .content p[style*="background-color: dodgerblue"],
body.d20-premium .pkp_structure_sidebar .pkp_block .content p[style*="background-color:dodgerblue"] {
background: linear-gradient(135deg, #007aff 0%, #0056cc 100%) !important;
}
/* Override gray progress bars */
body.d20-premium .pkp_structure_sidebar .pkp_block .content p[style*="background-color: gray"],
body.d20-premium .pkp_structure_sidebar .pkp_block .content p[style*="background-color:gray"],
body.d20-premium .pkp_structure_sidebar .pkp_block .content p[style*="background-color: grey"],
body.d20-premium .pkp_structure_sidebar .pkp_block .content p[style*="background-color:grey"] {
background: linear-gradient(135deg, #8e8e93 0%, #636366 100%) !important;
}
/* Stat labels (plain text lines above/between progress bars) */
body.d20-premium .pkp_structure_sidebar .pkp_block .content p:not([style*="background"]) {
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.35 !important;
color: #2a2a2a !important;
margin: 12px 0 3px !important;
letter-spacing: -0.01em !important;
}
/* Collapse
inside stat blocks — hide line breaks for tighter layout */
body.d20-premium .pkp_structure_sidebar .pkp_block .content br {
display: none !important;
}
/* Stat description spans */
body.d20-premium .pkp_structure_sidebar .pkp_block .content span {
font-size: 13px !important;
color: #555 !important;
line-height: 1.4 !important;
}
/* ─── 10. "Enviar un artículo" button: proper styling ─── */
body.d20-premium .pkp_structure_sidebar .pkp_block .content a.btn,
body.d20-premium .pkp_structure_sidebar .pkp_block .content a[href*="submission"] {
display: inline-block;
padding: 8px 20px;
border: 2px solid var(--d20-purple);
border-radius: 999px;
color: var(--d20-purple) !important;
font-weight: 700;
font-size: 13px;
text-decoration: none;
text-align: center;
transition: all 0.2s;
margin: 4px 0;
}
body.d20-premium .pkp_structure_sidebar .pkp_block .content a.btn:hover,
body.d20-premium .pkp_structure_sidebar .pkp_block .content a[href*="submission"]:hover {
background: var(--d20-purple);
color: #fff !important;
}
/* ─── 11. Keywords: comma-separated with "y"/"and" before last ─── */
.d20-keywords-list {
display: inline;
}
.d20-keyword {
display: inline;
}
/* Add ", " between all keywords except before the last */
.d20-keyword + .d20-keyword:not(:last-child)::before {
content: ", ";
}
/* Add " y " before the last keyword (Spanish default) */
.d20-keyword:last-child:not(:only-child)::before {
content: " y ";
}
/* English locale: use " and " instead */
html[lang="en-US"] .d20-keyword:last-child:not(:only-child)::before {
content: " and ";
}
/* ─── 12. "Número actual": el aire va DENTRO de la barra morada ─── */
/* Antes el padding estaba en .page-header, que no tiene fondo. Eso metia la
barra morada 18px hacia dentro mientras la linea gris de Bootstrap seguia a
ancho completo, y se veia un escalon a ambos lados. Ademas el h2 se quedaba
con "padding: 4px 0", asi que el texto tocaba el borde del morado. */
body.d20-premium.pkp_page_index .current_issue .page-header,
body.d20-premium.pkp_page_issue .page-header {
padding: 0 !important;
margin-bottom: 16px !important;
border-bottom: 0 !important;
}
body.d20-premium.pkp_page_index .current_issue .page-header h1,
body.d20-premium.pkp_page_index .current_issue .page-header h2,
body.d20-premium.pkp_page_issue .page-header h1,
body.d20-premium.pkp_page_issue .page-header h2 {
padding: 14px 22px !important;
margin: 0 !important;
}
/* ─── 13. Channel buttons — extra padding ─── */
body.d20-premium .d20-community-cta__channels {
padding: 0 16px 8px;
}
/* ─── 14. Article detail — justify all paragraphs ─── */
body.d20-premium.pkp_page_article .article-details p,
body.d20-premium.pkp_page_article .article-summary p,
body.d20-premium.pkp_page_article .article-abstract p,
body.d20-premium.pkp_page_article .article-references p,
body.d20-premium.pkp_page_article .article-more-details p,
body.d20-premium.pkp_page_article .panel-body p {
text-align: justify;
}
/* =========================================================
INDEX PAGE STYLES (merged from d20-index.css)
Scope: #revista-component-wrapper, .indexaciones-section
========================================================= */
/* Design tokens (scoped to #revista-component-wrapper) */
#revista-component-wrapper {
--font-base: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--size-base: 16px;
--line-height: 1.6;
--c-primary: var(--d20-purple, #3f264d);
--c-primary-h: var(--d20-purple-700, #2f1b39);
--c-accent: #FFC107;
--c-white: #ffffff;
--c-dark: #212529;
--c-gray-100: #f5f5f5;
--c-gray-200: #e0e0e0;
--c-gray-600: #6c757d;
--c-success: #198754;
--c-danger: #dc3545;
--sp-1: 0.25rem;
--sp-2: 0.5rem;
--sp-3: 1rem;
--sp-4: 1.5rem;
--sp-5: 2rem;
--sp-6: 3rem;
--r-sm: 4px;
--r-md: 8px;
--r-lg: 12px;
--r-full: 50px;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
font-family: var(--font-base);
color: #333;
background: #fff;
}
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes float {
0% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(5deg); }
100% { transform: translateY(0px) rotate(0deg); }
}
@keyframes pulse-glow {
0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.4); }
70% { box-shadow: 0 0 0 15px rgba(255, 193, 7, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
}
.revista-limitless-bg {
background: linear-gradient(-45deg, #ffffff, #f7f7f7, #fff8e1, #ffffff);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
position: relative;
overflow: hidden;
padding: var(--sp-5) 0;
}
.glass-card {
background: rgba(255, 255, 255, 0.9) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: var(--r-md);
}
.step-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
background: #fff;
padding: var(--sp-3);
border-radius: var(--r-md);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
}
.step-card:hover {
transform: translateX(5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05) !important;
}
.step-details {
max-height: 0;
opacity: 0;
overflow: hidden;
margin-top: 0;
padding-top: 0;
border-top: 1px solid transparent;
width: 100%;
padding-left: 50px;
transition: all 0.4s ease-in-out;
}
.step-card.active .step-details {
max-height: 500px;
opacity: 1;
margin-top: 15px;
padding-top: 10px;
border-top: 1px solid #eee;
}
.step-details ul { list-style-type: none; padding: 0; margin: 0; }
.step-details li {
position: relative;
padding-left: 15px;
margin-bottom: 5px;
font-size: 0.9rem;
color: var(--c-gray-600);
}
.step-details li::before {
content: "\2022";
color: var(--c-primary);
position: absolute;
left: 0;
font-weight: bold;
}
.step-toggle-icon {
color: var(--c-gray-600);
transition: transform 0.3s ease;
margin-left: 10px;
margin-top: 5px;
}
.step-card.active .step-toggle-icon { transform: rotate(180deg); }
.step-number {
width: 35px;
height: 35px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
margin-right: 15px;
flex-shrink: 0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
color: #fff;
}
.step-header {
display: flex;
align-items: flex-start;
width: 100%;
justify-content: space-between;
}
.step-header-content {
display: flex;
align-items: center;
flex-grow: 1;
}
.step-header-content strong { margin-top: 0; line-height: 1.2; }
#revista-component-wrapper .text-center { text-align: center; }
#revista-component-wrapper .container-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 992px) {
#revista-component-wrapper .container-grid {
grid-template-columns: 1fr 1fr;
}
}
#revista-component-wrapper h1,
#revista-component-wrapper h2,
#revista-component-wrapper h4,
#revista-component-wrapper h5 {
color: var(--c-dark);
margin-top: 0;
}
.footer-social-row a { text-decoration: none; }
.text-link { text-decoration: none; color: var(--c-primary); transition: color 0.3s; }
.text-link:hover { color: var(--c-primary-h); }
.d20-revista-header { margin-bottom: var(--sp-6); }
.d20-revista-title {
font-size: 2.5rem;
font-weight: 800;
color: #333;
margin-bottom: 0.5rem;
display: inline-block;
}
.d20-revista-subtitle {
font-size: 1.5rem;
font-weight: 500;
color: var(--c-gray-600);
margin-bottom: 1.5rem;
letter-spacing: 1px;
}
.d20-revista-desc {
margin: 0 auto;
max-width: 800px;
font-size: 1.1rem;
line-height: 1.6;
color: var(--c-gray-600);
}
.d20-revista-container {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
}
.d20-glass-body { padding: var(--sp-5); }
.d20-glass-heading {
color: var(--c-primary);
margin-bottom: var(--sp-4);
font-weight: 700;
}
.d20-review-callout {
background: linear-gradient(to right, #fff8e1, #fff);
border-left: 4px solid var(--c-accent);
padding: var(--sp-3);
border-radius: 4px;
margin-bottom: var(--sp-4);
}
.d20-review-callout p { margin: 0; font-size: 0.95rem; color: #856404; }
.d20-quicklinks-title {
margin-bottom: var(--sp-3);
font-weight: 600;
border-bottom: 1px solid #eee;
padding-bottom: 5px;
}
.d20-quicklinks { list-style: none; padding: 0; display: grid; gap: 8px; }
.d20-quicklinks a { display: flex; align-items: center; }
.d20-quicklinks i { color: var(--c-primary); margin-right: 10px; width: 16px; }
.d20-process-title {
margin-bottom: var(--sp-4);
color: var(--c-dark);
font-weight: 700;
text-align: center;
}
.d20-process-steps { display: flex; flex-direction: column; gap: var(--sp-3); }
.d20-step-label { display: block; margin-bottom: 5px; font-size: 1.1rem; }
.d20-step-desc { font-size: 0.9rem; margin: 0; color: var(--c-gray-600); }
.d20-cta-footer {
margin-top: var(--sp-6);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.d20-cta-submit {
font-size: 1.2rem;
padding: 1rem 3rem;
animation: pulse-glow 2s infinite;
margin-bottom: var(--sp-5);
background-color: var(--c-accent);
border-color: var(--c-accent);
color: var(--c-dark) !important;
}
/* Current Issue section header */
.d20-section-header {
display: block;
margin: 0 0 0.75rem;
padding: 20px 28px;
background: linear-gradient(135deg, var(--d20-purple, #3f264d) 0%, var(--d20-purple-700, #2f1b39) 100%);
color: #fff;
font-size: 1.5rem;
font-weight: 800;
letter-spacing: 0.3px;
line-height: 1.45;
overflow: visible;
border-bottom: 3px solid var(--d20-gold, #c9a227);
border-radius: 12px 12px 0 0;
}
/* Indexaciones — static logo grid */
.d20-section-header--index {
display: block;
margin: 0 0 1.5rem;
padding: 14px 20px;
background: linear-gradient(135deg, var(--d20-purple, #3f264d) 0%, var(--d20-purple-700, #2f1b39) 100%);
color: #fff;
font-size: 1.1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 3px solid var(--d20-gold, #c9a227);
border-radius: 12px 12px 0 0;
}
.d20-index-desc {
margin: 0 auto 1.5rem;
max-width: 900px;
font-size: 1.1rem;
line-height: 1.6;
color: #6c757d;
text-align: center;
}
.d20-index-desc a { color: var(--d20-purple, #3f264d); font-weight: 700; text-decoration: none; margin-left: 5px; }
.d20-index-desc a:hover { color: var(--d20-gold, #c9a227); text-decoration: underline; }
.d20-index-logos {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 24px 32px;
padding: 24px 16px 28px;
background: #fff;
border-radius: 0 0 12px 12px;
box-shadow: var(--shadow-md, 0 4px 6px rgba(50, 50, 93, 0.11));
}
.d20-index-logos a {
display: inline-flex;
align-items: center;
transition: filter 0.25s ease, transform 0.25s ease;
}
.d20-index-logos img {
max-height: 48px;
width: auto;
filter: grayscale(25%);
opacity: 0.88;
transition: filter 0.25s ease, opacity 0.25s ease;
}
.d20-index-logos a:hover img {
filter: grayscale(0%);
opacity: 1;
transform: scale(1.05);
}
@media (max-width: 640px) {
.d20-index-logos { gap: 18px 20px; padding: 18px 12px 22px; }
.d20-index-logos img { max-height: 40px; }
}
/* =========================================================
FIX 2026-05-25: Sidebar block titles cut off
---------------------------------------------------------
Some custom blocks use
for accessibility — they should be visually hidden. Earlier
.pkp_block h2.title rules forced them visible, where the
parent's overflow:hidden then clipped the long titles
("PL...", "Ac..."). Restore screen-reader hiding, and tame
oversized inline-styled banners injected via custom HTML.
========================================================= */
body.d20-premium .pkp_structure_sidebar .pkp_block h2.title.pkp_screen_reader,
body.d20-premium .pkp_structure_sidebar .pkp_block h2.pkp_screen_reader,
body.d20-premium .pkp_block .pkp_screen_reader {
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;
background: transparent !important;
color: transparent !important;
}
/* (Retirado) Aqui habia un intento previo de "domar" los banners morados en
linea. Usaba 1.05rem, que con el html a 10px daba 10.5px: letra mas pequena
que el texto del bloque. Su trabajo lo hace ahora la seccion
"UNIFICACION DE ENCABEZADOS DE LA BARRA LATERAL" al final del archivo. */
/* =========================================================
D20 FIX: issue article cards need inner breathing room
Actual issue TOC markup: .page_issue .article-summary.media
========================================================= */
/* El texto quedaba pegado al borde izquierdo de la ficha: 24px en escritorio
y solo 16px en pantallas estrechas, que con titulos grandes se ve apretado.
Se sube el margen interior y se aplica tambien fuera de .page_issue, porque
estas fichas salen igual en busquedas y en la portada. */
body.d20-premium .article-summary.media,
body.d20-premium .page_issue .article-summary.media {
box-sizing: border-box !important;
padding: 26px 32px !important;
}
/* Bootstrap 3 da a .media-body "width: 10000px" con display:table-cell, un
truco para que ocupe el resto de la fila. Como la ficha es flex en columna,
ese ancho se aplica literalmente y el titulo se salia de la tarjeta (la
ficha tiene overflow:hidden, asi que se veia cortado en vez de partirse). */
body.d20-premium .article-summary.media > .media-body,
body.d20-premium .page_issue .article-summary.media > .media-body {
box-sizing: border-box !important;
display: block !important;
width: auto !important;
max-width: 100% !important;
min-width: 0 !important;
padding-left: 0 !important;
padding-right: 6px !important;
}
/* y que las palabras largas partan en vez de desbordar */
body.d20-premium .article-summary.media .media-heading,
body.d20-premium .article-summary.media .media-heading a,
body.d20-premium .article-summary.media .authors,
body.d20-premium .article-summary.media .pages {
max-width: 100% !important;
overflow-wrap: break-word !important;
word-wrap: break-word !important;
}
@media (max-width: 640px) {
body.d20-premium .article-summary.media,
body.d20-premium .page_issue .article-summary.media {
padding: 20px 22px !important;
}
body.d20-premium .article-summary.media > .media-body,
body.d20-premium .page_issue .article-summary.media > .media-body {
padding-right: 0 !important;
}
}
/* =========================================================
BLOQUE INDICADORES / ESTADISTICAS (anadido 2026-07-27)
Las clases .fondo y .skills se usaban en el contenido del
bloque pero nunca tuvieron CSS, por eso las barras se veian
crudas. Todo va dentro de .pkp_block para no afectar el resto.
========================================================= */
.pkp_block .fondo {
background: #eceaf0;
border-radius: 999px;
height: 22px;
overflow: hidden;
margin: 6px 0 14px;
}
.pkp_block .fondo .skills {
height: 100%;
line-height: 22px;
color: #fff;
font-weight: 600;
font-size: 13px;
text-align: right;
padding-right: 10px;
border-radius: 999px;
box-sizing: border-box;
min-width: 2.5em;
white-space: nowrap;
}
/* (Retirado) Otra pasada anterior sobre los mismos banners morados.
Sustituida por la seccion de unificacion al final del archivo. */
/* Nombres de idioma: 3.5 los toma de los metadatos de locale y el espanol va
en minuscula por convencion. Se capitaliza solo visualmente. */
.pkp_block.block_language a {
text-transform: capitalize;
}
/* =========================================================
BLOQUE "NUMERO DE VISITAS" con metricas propias de OJS
Sustituye al contador externo freecounterstat (caido).
Usa los tokens del tema: --d20-purple, --d20-gold.
========================================================= */
.pkp_block .d20-visitas {
border-radius: var(--d20-radius-sm, 12px);
overflow: hidden;
box-shadow: var(--d20-shadow, 0 10px 30px rgba(0,0,0,.10));
background: var(--d20-surface, #fff);
font-family: inherit;
}
.pkp_block .d20-visitas__head {
background: linear-gradient(135deg, #3f264d 0%, #5e4862 100%);
color: #fff;
font-size: 15px;
font-weight: 700;
letter-spacing: .3px;
padding: 10px 14px;
border-bottom: 3px solid #c9a227;
}
.pkp_block .d20-visitas__total {
text-align: center;
padding: 18px 12px 12px;
}
.pkp_block .d20-visitas__num {
display: block;
font-size: 34px;
line-height: 1.05;
font-weight: 800;
color: #3f264d;
letter-spacing: -.5px;
font-variant-numeric: tabular-nums;
}
.pkp_block .d20-visitas__cap {
display: block;
margin-top: 4px;
font-size: 12px;
color: #6b6b76;
text-transform: uppercase;
letter-spacing: .6px;
}
.pkp_block .d20-visitas__cap em { font-style: normal; opacity: .75; }
.pkp_block .d20-visitas__grid {
display: flex;
border-top: 1px solid rgba(0,0,0,.07);
}
.pkp_block .d20-visitas__cell {
flex: 1 1 50%;
text-align: center;
padding: 12px 6px;
}
.pkp_block .d20-visitas__cell + .d20-visitas__cell {
border-left: 1px solid rgba(0,0,0,.07);
}
.pkp_block .d20-visitas__cell b {
display: block;
font-size: 17px;
font-weight: 700;
color: #3f264d;
font-variant-numeric: tabular-nums;
}
.pkp_block .d20-visitas__cell span {
display: block;
margin-top: 2px;
font-size: 11px;
color: #6b6b76;
text-transform: uppercase;
letter-spacing: .4px;
}
.pkp_block .d20-visitas__year {
background: #faf7ef;
border-top: 1px solid rgba(201,162,39,.35);
text-align: center;
padding: 9px 10px;
font-size: 15px;
font-weight: 700;
color: #8a6d12;
font-variant-numeric: tabular-nums;
}
.pkp_block .d20-visitas__year span {
display: block;
font-size: 11px;
font-weight: 500;
color: #93803f;
text-transform: uppercase;
letter-spacing: .4px;
margin-top: 1px;
}
.pkp_block .d20-visitas__src {
text-align: center;
font-size: 10px;
color: #9b9ba5;
padding: 7px 8px 9px;
}
/* =========================================================
CARRUSEL DE INDEXACIONES (vuelve al scroll continuo)
La pista se duplica en la plantilla, por eso el 50%.
========================================================= */
.d20-index-marquee {
overflow: hidden;
position: relative;
padding: 10px 0;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.d20-index-marquee .d20-index-track {
display: flex;
width: max-content;
animation: d20IndexScroll 55s linear infinite;
}
.d20-index-marquee:hover .d20-index-track,
.d20-index-marquee:focus-within .d20-index-track {
animation-play-state: paused;
}
.d20-index-marquee .d20-index-logos {
display: flex;
align-items: center;
gap: 42px;
padding: 0 21px;
flex: 0 0 auto;
}
.d20-index-marquee .d20-index-logos a {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
height: 62px;
}
.d20-index-marquee .d20-index-logos img {
max-height: 58px;
width: auto;
max-width: 170px;
object-fit: contain;
filter: grayscale(35%);
opacity: .9;
transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}
.d20-index-marquee .d20-index-logos a:hover img {
filter: grayscale(0);
opacity: 1;
transform: scale(1.06);
}
@keyframes d20IndexScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.d20-index-marquee .d20-index-track { animation: none; }
.d20-index-marquee { overflow-x: auto; }
}
/* =========================================================
UNIFICACION DE ENCABEZADOS DE LA BARRA LATERAL
Convivian 3 estilos: el titulo nativo de OJS (.pkp_block .title),
un
morado con estilo en linea dentro de los bloques
personalizados, y el degradado del bloque de visitas.
Se unifican todos al mismo tratamiento: morado con linea dorada,
igual que los encabezados del cuerpo.
========================================================= */
/* Nota de especificidad: los
morados los pisaban reglas antiguas del tipo
"body.d20-premium .pkp_structure_sidebar .pkp_block .content p[...]". Esas ya
se retiraron, pero estas se escriben igual de especificas para que ganen
pase lo que pase, sin depender del orden del archivo. */
/* Sub-encabezado:
morado que NO abre el bloque (p. ej. "Estadisticas" e
"Internacionalizacion" dentro de Indicadores). Tratamiento subordinado, para
no apilar dos barras moradas seguidas bajo la cabecera de la tarjeta. */
body.d20-premium .pkp_structure_sidebar .pkp_block .content p[style*="5e4862"] {
background: transparent !important;
color: var(--d20-purple, #3f264d) !important;
font-size: 13.5px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
text-transform: uppercase !important;
letter-spacing: .6px !important;
padding: 4px 0 4px 10px !important;
margin: 16px 0 8px !important;
border: 0 !important;
border-left: 3px solid var(--d20-gold, #c9a227) !important;
border-radius: 0 !important;
display: block !important;
min-height: 0 !important;
box-shadow: none !important;
}
/* Cabecera de tarjeta: el h2 nativo de OJS, o el
morado cuando es lo
primero del bloque. El radio lo recorta .pkp_block con overflow:hidden. */
body.d20-premium .pkp_structure_sidebar .pkp_block > .title:not(.pkp_screen_reader),
body.d20-premium .pkp_structure_sidebar .pkp_block .content > p[style*="5e4862"]:first-child,
body.d20-premium .pkp_structure_sidebar .pkp_block .content > *:first-child > p[style*="5e4862"]:first-child {
background: linear-gradient(135deg, #3f264d 0%, #5e4862 100%) !important;
color: #fff !important;
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: .3px !important;
line-height: 1.35 !important;
text-transform: none !important;
padding: 10px 14px !important;
border: 0 !important;
border-bottom: 3px solid var(--d20-gold, #c9a227) !important;
border-radius: 0 !important;
display: block !important;
min-height: 0 !important;
box-shadow: none !important;
}
/* El
cuelga de .content, cuyo padding real es 16px 18px: hay que sacarlo
a los bordes de la tarjeta para que quede a ras como el h2 nativo. */
body.d20-premium .pkp_structure_sidebar .pkp_block .content > p[style*="5e4862"]:first-child,
body.d20-premium .pkp_structure_sidebar .pkp_block .content > *:first-child > p[style*="5e4862"]:first-child {
margin: -16px -18px 12px !important;
}
/* el bloque en si: tarjeta coherente con el resto */
.pkp_block {
background: var(--d20-surface, #fff);
border-radius: var(--d20-radius-sm, 12px);
box-shadow: var(--d20-shadow, 0 10px 30px rgba(0,0,0,.10));
overflow: hidden;
margin-bottom: 18px;
padding: 0;
}
.pkp_block > *:not(.title):not(.d20-visitas) { padding-left: 15px; padding-right: 15px; }
.pkp_block > *:last-child { padding-bottom: 12px; }
/* el bloque de visitas ya trae su propia cabecera: se evita doble marco y se
saca del padding de .content para que quede a ras como las demas tarjetas */
.pkp_block .d20-visitas { box-shadow: none; border-radius: 0; }
body.d20-premium .pkp_structure_sidebar .pkp_block .content > .d20-visitas {
margin: -16px -18px !important;
}
/* =========================================================
ANCHO DEL CONTENIDO
El contenedor de Bootstrap 3 se queda en 1170px, lo que deja
la vista de articulo muy contraida en pantallas grandes.
========================================================= */
/* (Retirado) Aqui habia otro juego de anchos que nunca llegaba a aplicarse:
las reglas "body.d20-premium ..." de la seccion FIX-D son mas especificas y
ganaban siempre. El ancho se controla alli. */
/* =========================================================
TEXTO JUSTIFICADO EN TODA LA PUBLICACION
Se aplica a la prosa del cuerpo. Se excluye lo que no es
prosa (botones, menus, metadatos, pies de figura cortos),
donde justificar deja huecos feos entre palabras.
========================================================= */
body.d20-premium .pkp_structure_main p,
body.d20-premium .journal-description p,
body.d20-premium .obj_article_details .abstract p,
body.d20-premium .obj_article_details .item p,
body.d20-premium .page_index_journal .additional_content p,
body.d20-premium .cmp_article_content p,
body.d20-premium .static-page p,
body.d20-premium .obj_issue_toc .heading p {
text-align: justify;
text-justify: inter-word;
hyphens: auto;
-webkit-hyphens: auto;
}
/* lo que NO debe justificarse */
body.d20-premium .pkp_structure_main .btn p,
body.d20-premium .pkp_structure_main .btn-group p,
body.d20-premium .pkp_structure_main nav p,
body.d20-premium .pkp_structure_main .pages,
body.d20-premium .pkp_structure_main .authors p,
body.d20-premium .pkp_structure_main .estadistica,
body.d20-premium .pkp_structure_main .d20-metrics,
body.d20-premium .pkp_structure_main figcaption,
body.d20-premium .pkp_structure_main .label,
body.d20-premium .pkp_structure_main table p {
text-align: left !important;
hyphens: manual;
}
/* en pantallas estrechas justificar produce rios de espacio en blanco */
@media (max-width: 600px) {
body.d20-premium .pkp_structure_main p,
body.d20-premium .journal-description p {
text-align: left;
hyphens: auto;
}
}
/* =========================================================
VISOR XML (plugin lensGalley)
Lens inyecta su lens.css por JavaScript DESPUES de las hojas
del tema, asi que aqui hace falta !important para ganarle.
Objetivo: que el XML se lea como la version HTML de la revista,
con la tipografia y los colores de la publicacion.
========================================================= */
/* Prosa: justificada, con la fuente del sitio y medida comoda */
body .lens-article .content-node.paragraph,
body .lens-article .content-node.text {
font-family: "Inter", "Segoe UI", Helvetica, Arial, sans-serif !important;
font-size: 17px !important;
line-height: 1.8 !important;
color: #23233a !important;
text-align: justify !important;
text-justify: inter-word !important;
hyphens: auto !important;
-webkit-hyphens: auto !important;
}
/* Aire lateral: el texto salia pegado al borde izquierdo */
body .lens-article .panel.content .nodes {
padding: 8px 42px 60px 42px !important;
}
body .lens-article .content-node {
padding-left: 0 !important;
padding-right: 0 !important;
}
body .lens-article .content-node.paragraph {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin: 0 0 18px 0 !important;
}
/* Titulares con la identidad de la revista */
body .lens-article .content-node.heading {
font-family: "Inter", "Segoe UI", Helvetica, Arial, sans-serif !important;
color: var(--d20-purple, #3f264d) !important;
text-align: left !important;
hyphens: manual !important;
}
body .lens-article .content-node.heading.level-1 {
font-size: 25px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
margin: 34px 0 14px !important;
padding-bottom: 8px !important;
border-bottom: 3px solid var(--d20-gold, #c9a227) !important;
}
body .lens-article .content-node.heading.level-2 {
font-size: 19px !important;
font-weight: 700 !important;
letter-spacing: .4px !important;
margin: 26px 0 10px !important;
padding-left: 12px !important;
border-left: 4px solid var(--d20-gold, #c9a227) !important;
}
body .lens-article .content-node.heading.level-3 {
font-size: 17px !important;
font-weight: 700 !important;
margin: 20px 0 8px !important;
}
/* Portadilla: titulo, autores y DOI */
body .lens-article .content-node.cover {
border-bottom: 1px solid rgba(63, 38, 77, .15) !important;
padding-bottom: 18px !important;
margin-bottom: 8px !important;
text-align: left !important;
}
body .lens-article .content-node.cover .title {
font-family: "Inter", "Segoe UI", Helvetica, Arial, sans-serif !important;
color: var(--d20-purple, #3f264d) !important;
font-weight: 800 !important;
line-height: 1.25 !important;
}
body .lens-article .content-node.cover .authors a,
body .lens-article .content-node.cover .authors {
color: #5e4862 !important;
font-weight: 600 !important;
}
/* Enlaces internos (citas, figuras, referencias) */
body .lens-article .content-node a,
body .lens-article .resource-reference {
color: #5e4862 !important;
border-bottom: 1px dotted rgba(94, 72, 98, .5) !important;
}
/* Listas, citas y tablas con el mismo aire */
body .lens-article .content-node.list,
body .lens-article .content-node ul,
body .lens-article .content-node ol {
text-align: left !important;
margin: 0 0 16px 0 !important;
}
body .lens-article .content-node table {
font-size: 15px !important;
width: 100% !important;
}
body .lens-article .content-node table th {
background: #f4f1f8 !important;
color: var(--d20-purple, #3f264d) !important;
}
/* Panel de recursos (referencias / figuras) a juego */
body .lens-article .resource-header {
font-family: "Inter", "Segoe UI", Helvetica, Arial, sans-serif !important;
color: var(--d20-purple, #3f264d) !important;
}
/* En movil no se justifica: la medida es demasiado corta */
@media (max-width: 700px) {
body .lens-article .content-node.paragraph,
body .lens-article .content-node.text { text-align: left !important; }
body .lens-article .panel.content .nodes { padding: 8px 18px 40px 18px !important; }
}
/* Metricas de la ficha del sumario (sustituyen al "Estadisticas:" vacio) */
body.d20-premium .d20-metrics {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
margin: 10px 0 12px;
padding: 0;
}
body.d20-premium .d20-metric {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 11px;
border-radius: 999px;
background: #f4f1f8;
border: 1px solid rgba(63, 38, 77, .12);
color: var(--d20-purple, #3f264d);
font-size: 13px;
font-weight: 700;
line-height: 1.4;
white-space: nowrap;
}
body.d20-premium .d20-metric i { opacity: .75; }
body.d20-premium .d20-metric__lbl {
font-weight: 500;
color: #6b6b80;
text-transform: lowercase;
}
/* =========================================================
SUMARIO EN PANTALLAS ESTRECHAS
El anidamiento .page > .issue-toc > .article-summary suma
padding en cada nivel: en un movil de 375px quedaban 149px
utiles para el texto, y la botonera de galeradas (284px, sin
permiso para saltar de linea) se salia de la ficha.
========================================================= */
@media (max-width: 640px) {
body.d20-premium .page.page_issue { padding: 16px 12px !important; }
body.d20-premium .issue-toc { padding: 10px 10px 18px !important; }
body.d20-premium .article-summary.media,
body.d20-premium .page_issue .article-summary.media { padding: 18px 16px !important; }
/* la botonera de galeradas puede repartirse en varias lineas */
body.d20-premium .article-summary .btn-group {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
width: 100% !important;
}
body.d20-premium .article-summary .btn-group > .btn,
body.d20-premium .article-summary .btn-group > .galley-link {
border-radius: 8px !important;
flex: 0 1 auto !important;
margin: 0 !important;
}
/* las metricas tambien, para que no fuercen ancho */
body.d20-premium .d20-metrics { gap: 6px !important; }
body.d20-premium .d20-metric { font-size: 12px !important; padding: 3px 9px !important; }
}