/**
 * modern-overrides.css
 * Modernizacion visual del tema "default" de OJS para Revista Letras UNMSM.
 * No reemplaza el tema, solo anade estilos encima (cascada CSS) para que
 * sea facil de revertir: basta con quitar el addStyle() que lo carga en
 * DefaultThemePlugin.php.
 *
 * Organizacion (revisado con criterio "senior frontend" - set 2026):
 *   1. Tokens de diseno (custom properties)
 *   2. Base, movimiento y accesibilidad
 *   3. Tipografia
 *   4. Layout: header/hero, navegacion, pie de pagina
 *   5. Componentes: botones, formularios, tablas, paginacion, breadcrumbs
 *   6. Tarjetas: articulos y anuncios
 *   7. Barra lateral y sus bloques especificos
 *   8. Portada de la revista (sobre la revista + numero actual)
 *   9. Pagina de detalle de articulo
 *
 * Antes esto crecio como 4 "pasadas" pegadas una tras otra, con colores y
 * radios repetidos a mano y un par de !important defensivos que no hacian
 * falta (la cascada ya resuelve el orden porque este archivo se carga
 * despues del stylesheet principal). Reescrito en una sola pasada con
 * tokens, sin !important y con `transition` acotado a las propiedades que
 * realmente cambian (no `all`, que fuerza al navegador a vigilar todo).
 */

/* =====================================================================
 * 1. Tokens de diseno
 * ===================================================================== */
:root {
	/* Color primario: debe reflejar la opcion "baseColour" del tema
	   (por defecto #1E6292 en DefaultThemePlugin.php). Si el journal
	   manager cambia ese color, actualizar aqui tambien. */
	--rl-color-primary: #1e6292;
	--rl-color-primary-dark: #164a70;
	--rl-color-primary-tint-08: rgba(30, 98, 146, 0.08);
	--rl-color-primary-tint-12: rgba(30, 98, 146, 0.12);
	--rl-color-primary-tint-16: rgba(30, 98, 146, 0.16);
	--rl-color-primary-tint-18: rgba(30, 98, 146, 0.18);
	--rl-color-primary-tint-25: rgba(30, 98, 146, 0.25);
	--rl-color-primary-tint-35: rgba(30, 98, 146, 0.35);
	--rl-color-primary-tint-88: rgba(30, 98, 146, 0.88);

	--rl-color-accent-danger: #d0392c;
	--rl-color-accent-warning: #d97706;
	--rl-color-accent-warning-tint-12: rgba(217, 119, 6, 0.12);

	--rl-color-surface: #fff;
	--rl-color-surface-subtle: rgba(0, 0, 0, 0.015);
	--rl-color-surface-hover: rgba(0, 0, 0, 0.035);
	--rl-color-border: rgba(0, 0, 0, 0.06);
	--rl-color-border-strong: rgba(0, 0, 0, 0.1);
	--rl-color-scrim: rgba(0, 0, 0, 0.04);

	/* Escala de espaciado (base 4px / 0.25rem) */
	--rl-space-1: 0.25rem;
	--rl-space-2: 0.5rem;
	--rl-space-3: 0.75rem;
	--rl-space-4: 1rem;
	--rl-space-5: 1.5rem;
	--rl-space-6: 2rem;

	/* Escala de radios */
	--rl-radius-sm: 6px;
	--rl-radius-md: 8px;
	--rl-radius-lg: 10px;
	--rl-radius-xl: 12px;
	--rl-radius-full: 999px;

	/* Escala de sombras (elevacion) */
	--rl-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04);
	--rl-shadow-2: 0 1px 3px rgba(0, 0, 0, 0.06);
	--rl-shadow-3: 0 4px 12px rgba(0, 0, 0, 0.06);
	--rl-shadow-4: 0 6px 16px rgba(0, 0, 0, 0.08);
	--rl-shadow-5: 0 8px 24px rgba(0, 0, 0, 0.12);

	--rl-transition-fast: 0.15s ease;
	--rl-transition-base: 0.18s ease;
}

/* =====================================================================
 * 2. Base, movimiento y accesibilidad
 * ===================================================================== */

/* Transiciones acotadas a las propiedades que de verdad cambian.
   `transition: all` obliga al navegador a observar cada propiedad en
   cada frame; aqui listamos solo lo que animamos mas abajo. */
a,
.cmp_button,
.cmp_button_wire,
.obj_article_summary,
.obj_announcement_summary,
.pkp_block,
.obj_galley_link,
.obj_galley_link_supplementary,
.block_web_feed .content li a,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
select,
textarea {
	transition-property: color, background-color, border-color, box-shadow, transform;
	transition-duration: var(--rl-transition-base);
	transition-timing-function: ease;
}

/* Foco visible accesible y moderno en toda la pagina */
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--rl-color-primary-tint-35);
	outline-offset: 2px;
	border-radius: var(--rl-radius-sm);
}

/* Respetar la preferencia del sistema de reducir movimiento:
   desactivamos los desplazamientos/transiciones decorativos. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}

	.cmp_button:hover,
	.cmp_button:focus,
	.cmp_button_wire:hover,
	.cmp_button_wire:focus,
	.obj_article_summary:hover,
	.obj_galley_link:hover,
	.obj_galley_link_supplementary:hover,
	.block_web_feed .content li a:hover,
	.pkp_structure_sidebar .pkp_block .content a:hover {
		transform: none;
	}
}

/* =====================================================================
 * 3. Tipografia
 * ===================================================================== */
.pkp_structure_main h1,
.page h1 {
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.pkp_structure_main h2,
.page h2 {
	font-weight: 600;
	letter-spacing: -0.01em;
}

.page_title {
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin-bottom: var(--rl-space-2);
}

.obj_article_details .subtitle {
	font-weight: 400;
	opacity: 0.75;
}

/* Etiquetas tipo "eyebrow" reutilizadas por varias secciones
   (DOI, palabras clave, resumen, etc.) */
.obj_article_details .item .label {
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.6;
	margin-bottom: var(--rl-space-2);
}

/* =====================================================================
 * 4. Layout: header/hero, navegacion, pie de pagina
 * ===================================================================== */
.pkp_structure_head {
	position: relative;
	box-shadow: var(--rl-shadow-2);
	border-bottom: none;
}

.pkp_site_name {
	font-weight: 700;
}

/* Cuando el journal manager activa "usar imagen de portada como
   cabecera", el tema inyecta un background-image inline en
   .pkp_structure_head; anadimos un degradado para que el texto siga
   siendo legible encima. */
.pkp_structure_head[style*="background"] {
	min-height: 220px;
}

.pkp_structure_head[style*="background"]::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.45) 100%);
	pointer-events: none;
}

.pkp_structure_head[style*="background"] .pkp_site_name,
.pkp_structure_head[style*="background"] .pkp_navigation_primary_wrapper a,
.pkp_structure_head[style*="background"] .pkp_navigation_user a {
	position: relative;
	z-index: 1;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.pkp_navigation_primary_wrapper a,
.pkp_navigation_user a {
	border-radius: var(--rl-radius-sm);
}

.pkp_navigation_primary_wrapper a:hover,
.pkp_navigation_user a:hover {
	background-color: var(--rl-color-surface-hover);
}

/* El tema base da muy poco aire vertical a los items del menu principal
   (padding-top de solo 0.357rem) y poco margen horizontal entre ellos
   (0.5em), por lo que en pantallas de escritorio se ven pegados unos a
   otros y contra el borde superior/inferior de la barra. Ampliamos solo
   el padding/margen, sin tocar posicionamiento ni alturas fijas. */
@media (min-width: 992px) {
	.pkp_navigation_primary_wrapper .pkp_navigation_primary > li > a {
		padding-top: var(--rl-space-3);
		padding-bottom: var(--rl-space-3);
		margin-left: var(--rl-space-2);
		margin-right: var(--rl-space-2);
	}

	.pkp_navigation_user_wrapper .pkp_navigation_user a {
		padding-top: var(--rl-space-2);
		padding-bottom: var(--rl-space-2);
	}
}

.pkp_site_nav_toggle {
	border-radius: var(--rl-radius-md);
}

/* Menus desplegables (Acerca de, Numeros, etc.). Bootstrap/Popper
   posicionan el menu con `transform` inline (no `margin`), asi que un
   margin-top normal no compite con eso y no necesita !important. */
.dropdown-menu {
	border-radius: var(--rl-radius-lg);
	border: 1px solid var(--rl-color-border-strong);
	box-shadow: var(--rl-shadow-5);
	padding: var(--rl-space-2) 0;
	margin-top: var(--rl-space-2);
}

.dropdown-menu li a {
	padding: var(--rl-space-2) var(--rl-space-4);
	border-radius: 0;
}

.dropdown-menu li a:hover {
	background: var(--rl-color-scrim);
}

/* Insignia de tareas pendientes ("Panel de control 41") - antes era
   texto plano en linea; ahora es una insignia de notificacion legible
   a simple vista, con buen contraste (blanco sobre rojo oscuro). */
.task_count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4em;
	height: 1.4em;
	margin-left: var(--rl-space-2);
	padding: 0 var(--rl-space-2);
	border-radius: var(--rl-radius-full);
	background: var(--rl-color-accent-danger);
	color: #fff;
	font-size: 0.75em;
	font-weight: 700;
	line-height: 1;
	text-shadow: none;
}

.pkp_structure_footer_wrapper {
	border-top: 1px solid var(--rl-color-border);
}

.pkp_footer_content {
	font-size: 0.9em;
	opacity: 0.85;
}

/* =====================================================================
 * 5. Componentes: botones, formularios, tablas, paginacion, breadcrumbs
 * ===================================================================== */
.cmp_button {
	border-radius: var(--rl-radius-md);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
	background: #f4f5f7;
	border-color: #e1e3e8;
}

.cmp_button:hover,
.cmp_button:focus {
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
	transform: translateY(-1px);
}

.cmp_button_wire {
	border-radius: var(--rl-radius-md);
}

.cmp_button_wire:hover,
.cmp_button_wire:focus {
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.cmp_notification {
	border-radius: 0 var(--rl-radius-md) var(--rl-radius-md) 0;
}

.cmp_form input[type="text"],
.cmp_form input[type="email"],
.cmp_form input[type="password"],
.cmp_form input[type="url"],
.cmp_form input[type="tel"],
.cmp_form select,
.cmp_form textarea {
	border-radius: var(--rl-radius-md);
}

.cmp_form input[type="text"]:focus,
.cmp_form input[type="email"]:focus,
.cmp_form input[type="password"]:focus,
.cmp_form input[type="url"]:focus,
.cmp_form input[type="tel"]:focus,
.cmp_form select:focus,
.cmp_form textarea:focus {
	outline: none;
	box-shadow: 0 0 0 3px var(--rl-color-primary-tint-18);
}

.pkp_search_mobile input[type="text"],
input.search_input,
.cmp_search_filter input[type="text"] {
	border-radius: var(--rl-radius-full);
	padding-left: var(--rl-space-4);
}

.cmp_table {
	border: none;
	border-radius: var(--rl-radius-md);
	overflow: hidden;
}

.cmp_table th,
.cmp_table td {
	border-bottom: 1px solid var(--rl-color-border);
}

.cmp_table tbody tr:nth-child(even) {
	background: var(--rl-color-surface-subtle);
}

.cmp_pagination a {
	border-radius: var(--rl-radius-full);
	padding: var(--rl-space-1) var(--rl-space-3);
}

.cmp_pagination a:hover {
	background: var(--rl-color-scrim);
}

.cmp_breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rl-space-1);
}

.cmp_breadcrumbs li {
	display: inline-flex;
	align-items: center;
}

.cmp_breadcrumbs a {
	padding: 0.15em var(--rl-space-3);
	border-radius: var(--rl-radius-full);
}

.cmp_breadcrumbs a:hover {
	background: var(--rl-color-scrim);
}

.cmp_breadcrumbs .separator {
	opacity: 0.4;
}

/* =====================================================================
 * 6. Tarjetas: articulos y anuncios
 * ===================================================================== */
.obj_article_summary {
	padding: var(--rl-space-4) var(--rl-space-5);
	margin-bottom: var(--rl-space-3);
	border-radius: var(--rl-radius-lg);
	background: var(--rl-color-surface);
	box-shadow: var(--rl-shadow-1);
	border: 1px solid var(--rl-color-border);
}

.obj_article_summary:hover {
	box-shadow: var(--rl-shadow-4);
	border-color: var(--rl-color-border-strong);
	transform: translateY(-2px);
}

.obj_article_summary .title {
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* Subrayado animado: aparece con la interaccion en lugar de estar
   siempre presente, reduciendo ruido visual en listas largas. */
.obj_article_summary .title a {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 1px;
}

.obj_article_summary .title a:hover {
	background-size: 100% 1px;
}

.obj_article_summary .authors {
	opacity: 0.75;
}

.obj_article_summary .meta {
	display: flex;
	gap: var(--rl-space-4);
	align-items: center;
	font-size: 0.9em;
	opacity: 0.75;
	margin-top: var(--rl-space-1);
}

.obj_article_summary .pages {
	padding: 0.1em var(--rl-space-2);
	border-radius: var(--rl-radius-full);
	background: var(--rl-color-scrim);
	font-size: 0.85em;
}

.galleys_links,
.supplementary_galleys_links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rl-space-2);
	list-style: none;
	padding: 0;
}

/* Anuncios: obj_announcement_summary es un <article>, no un <li> del
   componente cmp_announcements - verificado contra el HTML real
   renderizado, no contra la documentacion de componentes. */
.obj_announcement_summary {
	padding: var(--rl-space-5) var(--rl-space-5);
	border-radius: var(--rl-radius-lg);
	background: var(--rl-color-surface);
	box-shadow: var(--rl-shadow-1);
	border: 1px solid var(--rl-color-border);
	margin-bottom: var(--rl-space-3);
}

.obj_announcement_summary h3 {
	margin-top: 0;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.obj_announcement_summary .date {
	font-size: 0.8em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.55;
	margin-bottom: var(--rl-space-2);
}

.obj_announcement_summary .read_more {
	color: var(--rl-color-primary);
}

/* Avisos secundarios listados debajo del destacado ("more"): version
   compacta, sin sombra, para marcar jerarquia visual clara respecto
   al aviso principal. */
.cmp_announcements .more {
	display: grid;
	gap: var(--rl-space-2);
}

.cmp_announcements .more .obj_announcement_summary {
	padding: var(--rl-space-3) var(--rl-space-4);
	box-shadow: none;
	background: var(--rl-color-surface-subtle);
}

.cmp_announcements .more .obj_announcement_summary h4 {
	margin: 0 0 0.2em;
	font-size: 1em;
	font-weight: 600;
}

.cmp_announcements .more .obj_announcement_summary .date {
	margin-bottom: 0;
}

/* =====================================================================
 * 7. Barra lateral y sus bloques especificos
 * ===================================================================== */
.pkp_block {
	background: var(--rl-color-surface);
	border-radius: var(--rl-radius-lg);
	border: 1px solid var(--rl-color-border);
	box-shadow: var(--rl-shadow-1);
	margin-bottom: var(--rl-space-4);
}

.pkp_structure_sidebar .pkp_block:last-child {
	margin-bottom: 0;
}

.pkp_block:hover {
	box-shadow: var(--rl-shadow-3);
}

.pkp_block .title {
	padding-bottom: var(--rl-space-2);
	border-bottom: 2px solid var(--rl-color-primary-tint-16);
	text-transform: uppercase;
	font-size: 0.85em;
	letter-spacing: 0.04em;
}

.pkp_structure_sidebar .pkp_block .content a {
	display: inline-block;
	padding: 0.15em 0;
}

.pkp_structure_sidebar .pkp_block .content a:hover {
	color: var(--rl-color-primary-dark);
	transform: translateX(2px);
}

/* Iconos de suscripcion (Atom/RSS): antes eran botones circulares muy
   chicos (2.4em) tratando de meter adentro un logo rectangular
   (80x15px) escalado a un icono de 1em - se veian amontonados e
   irreconocibles. Ahora usan la misma tarjeta en grid que el bloque de
   "indizaciones" (seccion 7 tambien, ver ".block_custom table/td" mas
   abajo) - a pedido, mismo lenguaje visual para los 2 bloques que
   muestran una lista de logos/enlaces externos. */
.block_web_feed .content ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--rl-space-3);
	list-style: none;
	padding: 0;
	margin: 0;
}

.block_web_feed .content li a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: var(--rl-space-3);
	border-radius: var(--rl-radius-md);
	background: var(--rl-color-surface);
	border: 1px solid var(--rl-color-border);
}

.block_web_feed .content li a:hover {
	background: var(--rl-color-primary-tint-08);
	border-color: var(--rl-color-primary-tint-25);
	transform: translateY(-2px);
}

/* Los logos de Atom/RSS/RSS2 son rectangulares (80x15) - se dejan
   escalar libremente dentro de la tarjeta en vez de forzarlos a un
   tamano de icono chico, mismo criterio que ".block_custom img". */
.block_web_feed .content img {
	max-width: 100%;
	height: auto;
}

@media (max-width: 480px) {
	.block_web_feed .content ul {
		grid-template-columns: 1fr;
	}
}

/* CTA de "Enviar un articulo": destacado, no un link de texto perdido
   entre los demas bloques. Se cualifica con la misma cadena de
   ancestros que ".pkp_structure_sidebar .pkp_block .content a" (mas
   abajo en este archivo) porque esa regla generica tiene mayor
   especificidad (4 clases) que ".block_make_submission_link" sola (1
   clase) y ganaba la cascada pese a estar declarada antes: el boton se
   veia como un link de texto plano en vez del CTA solido que se
   penso. Mismo azul translucido que los botones de descarga
   (".obj_galley_link", seccion 9) - a pedido, para que se vea como el
   mismo tipo de accion en todo el sitio en vez de 2 tonos de azul
   distintos (uno solido, uno translucido). */
.pkp_structure_sidebar .pkp_block .content a.block_make_submission_link,
.block_make_submission_link {
	display: block;
	text-align: center;
	padding: 0.7em var(--rl-space-4);
	border-radius: var(--rl-radius-md);
	background: var(--rl-color-primary-tint-88);
	color: #fff;
	font-weight: 600;
}

.pkp_structure_sidebar .pkp_block .content a.block_make_submission_link:hover,
.block_make_submission_link:hover {
	background: var(--rl-color-primary-dark);
	color: #fff;
}

/* Bloque de indizaciones: contenido HTML libre cargado por el gestor
   de la revista (tabla con <img> separadas por <hr>). En vez de tocar
   ese contenido, redefinimos como se renderiza la tabla: la
   "destabulamos" visualmente con `display: contents` en las filas
   (mantiene la semantica/accesibilidad de tabla en el DOM, pero la
   presenta como grid) y ocultamos los <hr> que ya no hacen falta. */
.block_custom img {
	/* Antes solo "max-width:100%" - alcanza para no desbordar el
	   contenedor, pero algunos logos (Metrics: letras-jcr-2021.jpg es
	   640x340, sin width/height propio en el HTML) igual se veian muy
	   grandes dentro de la barra lateral y sumaban demasiado scroll.
	   200px iguala mas o menos el ancho que ya usan los otros logos
	   chicos (indizaciones: width="150" en el propio <img>). */
	max-width: min(100%, 200px);
	height: auto;
	border-radius: 4px;
}

.block_custom table {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--rl-space-3);
	width: 100%;
	margin-top: var(--rl-space-3);
	border: none;
}

.block_custom tbody {
	display: contents;
}

.block_custom tr {
	display: contents;
}

.block_custom td {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--rl-space-2);
	border-radius: var(--rl-radius-md);
	background: var(--rl-color-surface);
	border: 1px solid var(--rl-color-border);
}

.block_custom td hr {
	display: none;
}

@media (max-width: 480px) {
	.block_custom table {
		grid-template-columns: 1fr;
	}
}

/* =====================================================================
 * 8. Portada de la revista (sobre la revista + numero actual)
 * ===================================================================== */
.homepage_image img {
	border-radius: var(--rl-radius-xl);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.homepage_image,
.journal_description img {
	border-radius: var(--rl-radius-lg);
}

/* El fondo real (foto + degradado de marca) vive en article-cards.less
   (necesita @rl-primary, variable LESS dinamica segun el "Color base"
   configurado - no alcanza con las custom properties fijas de este
   archivo) - antes lo tenia el hero, que se sacó a pedido. Aca solo
   queda el padding/tipografia, y el color de texto pasa a blanco para
   que se lea sobre esa foto en vez del texto oscuro que tenia contra
   el fondo claro anterior. */
.homepage_about {
	padding: var(--rl-space-5);
	margin-bottom: var(--rl-space-5);
	border-radius: var(--rl-radius-xl);
	font-size: 1.05em;
	line-height: 1.6;
	color: #fff;
}

.homepage_about h2 {
	display: flex;
	align-items: center;
	gap: var(--rl-space-2);
	margin-top: 0;
	margin-bottom: var(--rl-space-3);
	font-size: 1em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #fff;
}

.homepage_about h2::before {
	content: "\f05a";
	font-family: FontAwesome;
	font-weight: normal;
}

/* "p:last-of-type" en vez de "p:last-child" - el ultimo <p> (el link
   "Leer mas...") ya no es forzosamente el ultimo HIJO de ".homepage_about"
   ahora que se le agrega ".rl_about_cta" despues (ver indexJournal.tpl).
   ":last-of-type" sigue apuntando al mismo <p>, sin importar que venga
   algo mas atras. */
.homepage_about p:last-of-type {
	margin-bottom: 0;
}

/* Antes este link no tenia color propio (heredaba el azul de link por
   defecto del navegador) - contra el fondo oscuro con foto que ahora
   tiene ".homepage_about" (ver seccion 8 de este archivo) quedaba casi
   ilegible. A pedido, blanco explicito con el mismo trato del resto
   del texto claro sobre foto (mismo criterio que tenian los links del
   hero que se sacó). */
.homepage_about p:last-of-type a {
	display: inline-flex;
	align-items: center;
	gap: var(--rl-space-2);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	transition: gap var(--rl-transition-fast);
}

.homepage_about p:last-of-type a:hover {
	gap: 0.6em;
	text-decoration: underline;
}

/* CTA para saltar a "Numero actual" / ir a enviar un articulo - antes
   vivian en el hero (".rl_hero_cta"), que se sacó a pedido; se
   reubican aca, en la misma seccion donde termino la foto/degradado de
   marca que el hero tambien tenia. Reusa ".cmp_button" (componente
   generico de OJS) en vez de inventar una clase de boton nueva. */
.rl_about_cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rl-space-3);
	margin-top: var(--rl-space-4);
}

.rl_about_cta .cmp_button {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.current_issue {
	padding: var(--rl-space-5);
	margin: var(--rl-space-5) 0;
	border-radius: var(--rl-radius-xl);
	background: linear-gradient(135deg, var(--rl-color-primary-tint-08), rgba(30, 98, 146, 0.02));
	border: 1px solid var(--rl-color-primary-tint-12);
}

/* "Numero actual" como eyebrow con icono, igual criterio que los
   encabezados de seccion (Articulos/Resenas, mas abajo en este mismo
   archivo) - misma jerarquia visual para todos los titulos de bloque
   de la portada. */
.current_issue > h2 {
	display: flex;
	align-items: center;
	gap: var(--rl-space-2);
	margin-top: 0;
	font-size: 1em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--rl-color-primary);
}

.current_issue > h2::before {
	content: "\f02d";
	font-family: FontAwesome;
	font-weight: normal;
}

.current_issue_title {
	margin-bottom: var(--rl-space-4);
	font-size: 1.3em;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* DOI y fecha de publicacion del numero: eran dos bloques apilados con
   label en negrita (tratamiento por defecto del theme base). Los
   pasamos a chips en linea, mismo lenguaje visual que rl_doi_badge en
   el resto del sitio. */
.obj_issue_toc .heading .pub_id,
.obj_issue_toc .heading .published {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4em;
	margin: 0 var(--rl-space-3) var(--rl-space-2) 0;
	padding: 0.3em var(--rl-space-3);
	border-radius: var(--rl-radius-full);
	background: var(--rl-color-surface);
	font-size: 0.9em;
}

.obj_issue_toc .heading .pub_id .type,
.obj_issue_toc .heading .published .label {
	font-weight: 600;
	color: var(--rl-color-primary);
}

.obj_issue_toc .heading .pub_id a {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 260px;
}

.read_more {
	display: inline-flex;
	align-items: center;
	gap: var(--rl-space-2);
	font-weight: 600;
}

.read_more:hover {
	gap: 0.6em;
}

/* OJO: el tema base NO usa flexbox aqui - a partir de @screen-tablet
   usa flotado (".cover { float:left; width:25% }" + ".heading" con
   clearfix, ver objects/issue_toc.less). Una version anterior de esta
   regla forzaba display:flex, lo que rompia ese layout: "width:25%"
   de un contenedor flex con ancho fit-content se resuelve de forma
   impredecible en los navegadores y dejaba una caja enorme casi vacia
   cuando el numero no tiene descripcion propia (solo portada + DOI +
   fecha). Ahora solo anadimos el fondo/padding decorativo sin tocar
   el mecanismo de layout - el flotado + clearfix del tema ya resuelve
   bien la altura de la caja alrededor de la portada. */
.obj_issue_toc .heading {
	padding: var(--rl-space-4);
	margin-bottom: var(--rl-space-4);
	border-radius: var(--rl-radius-lg);
	background: var(--rl-color-surface-subtle);
}

.obj_issue_toc .heading .cover img {
	border-radius: var(--rl-radius-md);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* =====================================================================
 * 9. Pagina de detalle de articulo
 * ===================================================================== */

/* Chips de autores en vez de lista separada por comas. El <li> real
   trae nombre + afiliacion + ORCID (ver article_details.tpl), asi que
   puede ocupar varias lineas; con radio "full" (999px) eso se veia
   como un ovalo gris deformado en vez de una tarjeta. Radio moderado
   + alineacion propia por chip (no heredada del flex-row del padre,
   que por defecto estira todos los <li> a la misma altura). */
.obj_article_details .authors {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--rl-space-2);
	list-style: none;
	padding: 0;
}

.obj_article_details .authors > li {
	padding: 0.4em var(--rl-space-4);
	border-radius: var(--rl-radius-lg);
	background: var(--rl-color-surface-hover);
	line-height: 1.4;
}

.obj_article_details .authors > li .affiliation,
.obj_article_details .authors > li .orcid {
	display: block;
	margin-top: 0.15em;
	font-size: 0.85em;
	opacity: 0.7;
}

/* Secciones DOI, palabras clave, resumen: separadas con una regla
   sutil; el resumen ademas se destaca con fondo propio. */
.obj_article_details .item {
	padding: var(--rl-space-5) 0;
	border-top: 1px solid var(--rl-color-border);
}

.obj_article_details .item:first-of-type {
	border-top: none;
	padding-top: 0;
}

.obj_article_details .item.abstract {
	padding: var(--rl-space-5);
	margin: var(--rl-space-4) 0;
	border-radius: var(--rl-radius-lg);
	background: var(--rl-color-surface-subtle);
	border: 1px solid var(--rl-color-border);
}

/* Categorias del articulo: tags/pills en vez de lista con vinetas */
.categories {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rl-space-2);
	list-style: none;
	padding: 0;
}

.categories li {
	display: inline-block;
}

.categories a {
	display: inline-block;
	padding: 0.3em var(--rl-space-3);
	border-radius: var(--rl-radius-full);
	background: var(--rl-color-primary-tint-08);
	color: var(--rl-color-primary);
	font-size: 0.85em;
	font-weight: 600;
	text-decoration: none;
}

.categories a:hover {
	background: var(--rl-color-primary-tint-16);
}

.item.copyright {
	padding: var(--rl-space-4) var(--rl-space-5);
	border-radius: var(--rl-radius-lg);
	background: var(--rl-color-surface-subtle);
	font-size: 0.9em;
}

.item.copyright img {
	max-width: 100%;
	height: auto;
}

.item.downloads_chart .value {
	padding: var(--rl-space-4);
	border-radius: var(--rl-radius-lg);
	background: var(--rl-color-surface-subtle);
}

/* Boton de descarga (PDF/HTML/XML/EPUB): el CTA mas importante de la
   pagina/tarjeta de articulo - antes era un link de texto plano, casi
   invisible. El icono real por formato viene del override de plantilla
   (frontend/objects/galley_link.tpl). Un color distinto por formato
   (rojo/violeta/verde) se probo y no convencio - un solo color (el
   primario del sitio) para los 4 formatos, pero translucido en vez de
   solido: se pidio "un poco mas transparente" en vez del bloque solido
   de antes. Radio de borde mas chico que el resto de los chips/pills
   del sitio (el radio "full" quedaba demasiado redondo para un boton
   con icono+texto, se leia mas como una etiqueta que como una accion).

   El tema base (objects/galley_link.less) YA le pone su propio icono a
   ".obj_galley_link" via ::before (y a ".obj_galley_link_supplementary"
   via ::after, con el mixin ".cmp_button_text") - con el <i> real que
   ahora agrega la plantilla, esos quedaban duplicados (2 iconos por
   boton). "content:none" los apaga sin tocar el archivo base.

   CORRECCION: el tema base tambien tiene ".obj_galley_link.pdf:before"
   (2 clases) con su PROPIO content ("\f1c1", el mismo icono de PDF) -
   mas especifico que el ".obj_galley_link::before" de arriba (1 clase),
   asi que ganaba la cascada sin importar el orden de carga y el icono
   de PDF nunca se llegaba a apagar (se notaba en casi todos los botones
   del sitio, ya que la mayoria son PDF). Se agrega aparte, calificado
   igual (2 clases), para empatar esa especificidad. */
.obj_galley_link::before,
.obj_galley_link.restricted::before,
.obj_galley_link_supplementary::after {
	content: none;
}

.obj_galley_link.pdf::before {
	content: none;
}

.obj_galley_link,
.obj_galley_link_supplementary {
	display: inline-flex;
	align-items: center;
	gap: var(--rl-space-2);
	padding: 0.6em 1.4em;
	border-radius: var(--rl-radius-md);
	background: var(--rl-color-primary-tint-88);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 2px 8px var(--rl-color-primary-tint-25);
}

.obj_galley_link i,
.obj_galley_link_supplementary i {
	font-size: 0.95em;
}

.obj_galley_link:hover,
.obj_galley_link_supplementary:hover {
	background: var(--rl-color-primary-dark);
	box-shadow: 0 4px 14px var(--rl-color-primary-tint-35);
	transform: translateY(-1px);
}

/* Layout de dos columnas del detalle de articulo: el tema base usa
   float + ancho fijo en px (.row > .main_entry 428px + .entry_details
   300px, pensado para un contenedor de ancho fijo) con un
   "border-left/border-right: 1px solid #ddd" para separar columnas.
   Esas reglas van calificadas como ".obj_article_details .entry_details"
   (2 clases) en el theme base, mas especifico que nuestro ".entry_details"
   suelto (1 clase) de la seccion 9 - por eso la linea gris seguia
   ganando la cascada pese a que la tarjeta cargaba despues. Igualamos
   la especificidad aqui y reemplazamos el float por flex, asi la
   tarjeta ya no depende de anchos fijos en px ni de un borde crudo
   para separarse del contenido principal. */
.obj_article_details .row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rl-space-6);
}

.obj_article_details .main_entry {
	float: none;
	width: auto;
	flex: 1 1 420px;
	min-width: 0;
	border-right: none;
}

.obj_article_details .entry_details {
	float: none;
	width: auto;
	flex: 0 0 300px;
	align-self: flex-start;
	margin: 0;
	padding: var(--rl-space-4);
	border-radius: var(--rl-radius-xl);
	background: var(--rl-color-surface);
	border: 1px solid var(--rl-color-border);
	border-top: 1px solid var(--rl-color-border);
	border-left: 1px solid var(--rl-color-border);
	box-shadow: var(--rl-shadow-2);
}

.obj_article_details .entry_details .item {
	margin-right: 0;
	padding: var(--rl-space-3) 0;
	border-bottom: 1px solid var(--rl-color-border);
}

.obj_article_details .entry_details .item:last-child {
	border-bottom: none;
}

.obj_article_details .entry_details .item.cover_image img {
	border-radius: var(--rl-radius-lg);
	margin-bottom: var(--rl-space-4);
}

/* =====================================================================
 * 10. Neutralizar separadores heredados del tema base
 * ===================================================================== *
 * El tema "default" de OJS todavia dibuja lineas duras (<hr>, bordes de
 * tabla completos, bordes de listas) en varios puntos que no cubrimos
 * arriba porque no pertenecen a un componente con clase propia. Esta
 * seccion neutraliza esas lineas heredadas para que las unicas lineas
 * visibles sean las que definimos nosotros arriba (tarjetas, item,
 * pkp_block .title). No tocamos utilidades JS (isDisabled, etc.).
 */

/* <hr> sueltos dentro del contenido (el navegador dibuja un "surco" de
   2px con relieve por defecto; lo reducimos a una linea fina y sutil,
   o los ocultamos donde ya hay una tarjeta que cumple esa funcion). */
.pkp_structure_main hr,
.pkp_structure_sidebar hr,
.page hr {
	border: none;
	border-top: 1px solid var(--rl-color-border);
	margin: var(--rl-space-4) 0;
}

/* Dentro de tarjetas que ya tienen su propio borde/sombra (articulo,
   anuncio, resumen, entry_details, indizaciones) el <hr> heredado es
   redundante: lo quitamos del todo en vez de solo suavizarlo. */
.obj_article_summary hr,
.obj_announcement_summary hr,
.obj_article_details .item hr,
.entry_details hr,
.current_issue hr,
.block_custom hr,
.block_custom td hr {
	display: none;
}

/* Tablas de contenido/reportes que no son .cmp_table ni .block_custom
   (el theme base les pone border-collapse + border en cada celda,
   generando una cuadricula completa). Conservamos solo la linea
   horizontal entre filas y quitamos las verticales entre columnas. */
.pkp_structure_main table:not(.cmp_table):not(.block_custom table),
.pkp_structure_sidebar table:not(.block_custom table) {
	border-left: none;
	border-right: none;
	border-collapse: collapse;
}

.pkp_structure_main table:not(.cmp_table):not(.block_custom table) th,
.pkp_structure_main table:not(.cmp_table):not(.block_custom table) td,
.pkp_structure_sidebar table:not(.block_custom table) th,
.pkp_structure_sidebar table:not(.block_custom table) td {
	border-left: none;
	border-right: none;
	border-top: none;
	border-bottom: 1px solid var(--rl-color-border);
}

/* Listas simples del theme base (ediciones anteriores, archivos, etc.)
   que usan un <li> con border-bottom en cada fila: mantenemos una sola
   linea fina consistente con el resto del sitio en lugar del gris
   oscuro por defecto. */
.pkp_structure_main ul:not(.categories):not(.authors):not(.galleys_links):not(.supplementary_galleys_links) > li,
.pkp_structure_sidebar .content ul > li {
	border-color: var(--rl-color-border);
}

/* Separador vertical que algunos navegadores/temas heredan entre la
   columna principal y la barra lateral (border-left en
   pkp_structure_sidebar): lo quitamos porque ya hay suficiente aire
   (gap) entre columnas y las tarjetas propias marcan el limite. */
.pkp_structure_sidebar {
	border-left: none;
}

.pkp_structure_main {
	border-right: none;
}

/* =====================================================================
 * 11. Insignia de paginas: anclada a la tarjeta, no a ".section"
 * ===================================================================== *
 * El theme base posiciona ".pages" con position:absolute (ver
 * styles/objects/article_summary.less) asumiendo un ancestro ".meta"
 * con position:relative. La plantilla de este sitio partio ese bloque
 * en ".rl_card_top_meta" / ".rl_authors" / ".pages" / ".rl_card_meta"
 * (verificado contra el HTML real de /issue/current) y ninguno de
 * esos contenedores es position:relative, asi que ".pages" escapaba
 * hasta el ancestro posicionado mas cercano fuera de la tarjeta y
 * todas las insignias de una seccion se apilaban en el mismo punto.
 * Solucion: grid en ".rl_card_body" (todos los hijos directos son
 * hermanos reales en el DOM) que ubica el titulo y las paginas en la
 * misma fila, y ".pages" pasa a position:static para participar del
 * grid en vez de flotar. */
.obj_article_summary .rl_card_body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: var(--rl-space-3);
	row-gap: var(--rl-space-2);
	align-items: baseline;
}

.obj_article_summary .rl_card_top_meta,
.obj_article_summary .rl_authors,
.obj_article_summary .rl_card_meta,
.obj_article_summary .rl_card_divider,
.obj_article_summary .rl_card_actions {
	grid-column: 1 / -1;
}

.obj_article_summary .title {
	grid-column: 1;
	margin: 0;
}

.obj_article_summary .pages {
	grid-column: 2;
	grid-row: 2;
	position: static;
	align-self: start;
	white-space: nowrap;
}

/* =====================================================================
 * 12. Quitar la insignia de seccion repetida en cada tarjeta
 * ===================================================================== *
 * El encabezado ".section h2" ya dice "Articulos" una vez por grupo;
 * ".rl_card_top_meta > .rl_section_badge" lo repetia en cada tarjeta.
 * Si el badge era el unico contenido de ".rl_card_top_meta", ocultamos
 * tambien el contenedor para que no deje una fila vacia en el grid de
 * la seccion 11. */
.obj_issue_toc .sections .section .rl_section_badge {
	display: none;
}

.obj_issue_toc .sections .section .rl_card_top_meta:empty {
	display: none;
}

/* =====================================================================
 * 13. "Enviar un articulo": micro-interaccion consistente con el resto
 * ===================================================================== *
 * El boton ya se resolvio antes (ver comentario en la seccion de
 * botones, mas arriba) como display:block + fondo solido. A pedido,
 * la flechita animada al final del texto (mismo patron que
 * ".rl_read_more") se reemplaza por un icono ANTES del texto en vez de
 * una flecha despues - "icono + Enviar un articulo". El transform de
 * hover ya queda neutralizado en modo "prefers-reduced-motion" por la
 * regla generica de la seccion 1
 * (".pkp_structure_sidebar .pkp_block .content a:hover"). */
.pkp_structure_sidebar .pkp_block .content a.block_make_submission_link,
.block_make_submission_link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	transition: transform var(--rl-transition-fast), box-shadow var(--rl-transition-fast), background-color var(--rl-transition-fast);
}

.block_make_submission_link::before {
	content: "\f1d8";
	font-family: FontAwesome;
	font-weight: normal;
}

.pkp_structure_sidebar .pkp_block .content a.block_make_submission_link:hover,
.block_make_submission_link:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px var(--rl-color-primary-tint-35);
}

/* =====================================================================
 * 14. Chip de autor: nombre destacado dentro de la tarjeta
 * ===================================================================== *
 * El radio "full" que causaba el ovalo deforme ya se corrigio en la
 * seccion 9 (".obj_article_details .authors > li", radio moderado +
 * bloques propios para nombre/afiliacion/orcid). Solo faltaba resaltar
 * el nombre (span.name, confirmado en article_details real) para que
 * se distinga de la afiliacion en la misma tarjeta. */
.obj_article_details .authors > li .name {
	font-weight: 600;
}

/* =====================================================================
 * 15. Palabras clave como chips, igual que ".categories"
 * ===================================================================== *
 * ".item.keywords .value" es un solo nodo de texto separado por comas
 * (confirmado en article_details real: "Palabras clave: " + texto
 * plano). Este CSS solo tiene efecto si cada palabra queda envuelta en
 * su propio span - ver modern-overrides.js, cargado por
 * DefaultThemePlugin.php junto a este archivo. */
.item.keywords .value {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rl-space-2);
}

.item.keywords .value .rl_keyword_chip {
	display: inline-block;
	padding: 0.3em var(--rl-space-3);
	border-radius: var(--rl-radius-full);
	background: var(--rl-color-primary-tint-08);
	color: var(--rl-color-primary);
	font-size: 0.85em;
	font-weight: 600;
}

/* =====================================================================
 * 16. Lineas divisorias crudas del theme base: pseudo-elemento con
 *     border propio, no <hr> ni border en el elemento mismo
 * ===================================================================== *
 * La seccion 10 solo apunta a <hr> reales y a bordes de <table>; este
 * es un mecanismo distinto que la seccion 10 no podia agarrar. El
 * theme base dibuja la linea horizontal junto a "Numero completo" y
 * junto a cada encabezado de seccion con un ::before posicionado en
 * absoluto (ver styles/objects/issue_toc.less, @media tablet+:
 * ".galleys, .section { position:relative; &:before { position:
 * absolute; top:45px; border-top: @bg-border; } } }"). El gemelo
 * vertical usa el mismo truco con border-left para separar el aviso
 * destacado de la lista de "mas avisos" en la portada (ver
 * styles/pages/indexJournal.less, @media tablet+: ".obj_announcement_
 * summary:before" / ".more:before"). Ambos confirmados contra el LESS
 * fuente del tema, no solo contra el CSS compilado. */
.obj_issue_toc .galleys::before,
.obj_issue_toc .section::before {
	display: none;
}

.pkp_page_index .cmp_announcements > .obj_announcement_summary::before,
.pkp_page_index .cmp_announcements .more::before {
	display: none;
}

/* =====================================================================
 * 17. Reemplazar (no solo suavizar) el resto de bordes crudos #ddd
 * ===================================================================== *
 * Auditoria completa del CSS compilado del theme base (grep de todo
 * "#ddd" en la hoja de estilos servida) para encontrar el resto de
 * lineas que no pasaban por <hr> ni por el ::before de la seccion 16.
 * Primer intento (tokenizar el color y sumar padding) seguia leyendose
 * como una linea recta de mas en un sitio que ya separa todo con
 * tarjetas/sombras/espacio en blanco, no con reglas - asi que en vez
 * de suavizar el borde, lo quitamos del todo y usamos margen (no solo
 * padding) para que la separacion sea aire real entre bloques, mas
 * consistente con el resto de componentes ya modernizados. */
.pkp_structure_head {
	border-bottom: none;
	box-shadow: 0 1px 3px var(--rl-color-border-strong);
}

/* Sin margin-top: "Avisos" es lo primero que hay en la columna
   principal en esta revista (no hay imagen de portada ni "Sobre la
   revista" activados) - con el margen de arriba que tenia antes,
   arrancaba mas abajo que la barra lateral (que no tiene ese margen
   extra en su primer bloque), dando la sensacion de estar
   "descolgada". Alineadas ambas al mismo padding-top que ya reparte
   ".pkp_structure_content" por igual a las 2 columnas. */
.pkp_page_index .cmp_announcements {
	border-top: none;
	border-bottom: none;
	margin: 0 0 var(--rl-space-5) 0;
	padding: 0 0 var(--rl-space-4) 0;
}

.pkp_page_index .additional_content {
	border-top: none;
	margin-top: var(--rl-space-5);
	padding-top: 0;
}

/* La linea vertical decorativa a ambos lados de la columna principal
   (theme base: ".pkp_structure_main:before,:after") es puramente
   ornamental - la quitamos en vez de solo cambiarle el color. */
.pkp_structure_main::before,
.pkp_structure_main::after {
	display: none;
}

/* =====================================================================
 * 18. Barra lateral "sticky" - QUITADO a pedido (set 2026)
 * ===================================================================== *
 * Se habia agregado "position:sticky" aca (queda documentado el motivo
 * original en la seccion 25 mas abajo, que sigue vigente). Con el
 * contenido actual de la barra lateral (bastante mas largo que antes:
 * indizaciones, metrics, antiplagio, keywordCloud, mostRead, etc.) el
 * efecto pegajoso se sentia como si la pagina "se congelara" - la
 * barra se quedaba fija arriba mientras se necesitaba scrollear
 * bastante para que su propio contenido (mas largo que el viewport)
 * terminara de pasar. Se pidio explicitamente quitarlo: la barra
 * vuelve a moverse en flujo normal con el resto de la pagina. */

/* =====================================================================
 * 19. Etiqueta de PDF en mayusculas
 * ===================================================================== *
 * El texto viene de $galley->getGalleyLabel() - dato editorial, distinto
 * por galería ("pdf", "Pdf", "PDF (Español)", etc.). En vez de tocar esos
 * datos (arriesgado: hay que ir galería por galería y algunas ya dicen
 * "PDF - Full Text" correctamente), uppercase por CSS lo normaliza sin
 * pisar nada en la base de datos. */
.obj_galley_link,
.obj_galley_link_supplementary {
	text-transform: uppercase;
}

/* =====================================================================
 * 20. "Numero completo" compacto y alineado con "Numero actual"
 * ===================================================================== *
 * El theme base trata ".galleys" (el link de descarga del numero
 * completo) con el mismo padding/margen "de seccion" que ".sections
 * .section" (Articulos, Resenas...), asi que quedaba leyendose como un
 * bloque titulado propio en medio de la portada, cortando el flujo
 * visual entre "Numero actual" y el resto. Como en la practica es un
 * solo boton de PDF, no una seccion, lo compactamos: sin el padding
 * grande, con el heading (antes oculto solo para lectores de
 * pantalla, ahora visible y en negrita - ver mas abajo) y el link
 * como un boton chico en vez de una fila de "seccion". */
/* El boton de PDF seguia sintiendose "separado" de "Publicado: fecha"
   por el layout con float que ya tiene ".heading" (la portada flota a
   la izquierda con altura fija; el DOI y la fecha son 2 lineas de
   texto cortas que flotan al lado, dejando un hueco vacio debajo de
   esas 2 lineas hasta que el contenido "limpia" el float). Reordenar
   con CSS (flex/order) no alcanza porque el hueco es DENTRO de
   ".heading", no entre ".heading" y ".galleys". La solucion real es
   mover el boton adentro de ".heading", justo despues de ".published"
   - ahi entra en la misma columna de texto que el DOI/fecha, sin
   depender de donde termine el float de la portada. Ese movimiento
   de DOM lo hace modern-overrides.js (buscar "moveIssueGalleysButton"),
   no se puede lograr solo con CSS. Aca solo el estilo compacto del
   boton una vez que ya esta en su lugar nuevo. */
.obj_issue_toc .heading .galleys {
	margin: var(--rl-space-2) 0 0 0;
	padding: 0;
}

/* El titulo ("Numero completo") estaba oculto solo para lectores de
   pantalla - a pedido, ahora es visible y en negrita, con el orden
   titulo > texto de apoyo > boton (ver issue_toc.tpl). El "::after"
   agrega los dos puntos (":") sin tocar la clave de traduccion
   original ("issue.fullIssue" no trae puntuacion). */
.obj_issue_toc .galleys_heading {
	margin: 0 0 var(--rl-space-1);
	font-size: 1em;
	font-weight: 700;
}

.obj_issue_toc .galleys_heading::after {
	content: ":";
}

.obj_issue_toc .galleys .galleys_links {
	margin-top: var(--rl-space-2);
}

/* El icono ya viene como <i> real dentro del link (ver override de
   galley_link.tpl y la seccion 9, donde se apaga el ::before duplicado
   que le pone el tema base) - mismo azul translucido que el resto de
   los botones de galeria del sitio, no un color aparte. */
.obj_issue_toc .galleys .obj_galley_link {
	display: inline-flex;
	align-items: center;
	gap: var(--rl-space-2);
	padding: 0.5em var(--rl-space-4);
	border-radius: var(--rl-radius-md);
	background: var(--rl-color-primary-tint-88);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	box-shadow: var(--rl-shadow-2);
}

.obj_issue_toc .galleys .obj_galley_link:hover,
.obj_issue_toc .galleys .obj_galley_link:focus-visible {
	background: var(--rl-color-primary-dark);
	box-shadow: var(--rl-shadow-3);
}

/* =====================================================================
 * 21. Encabezados de seccion (Articulos, Resenas...) mas presentes
 * ===================================================================== *
 * El "left:-15px" + gris apagado del theme base estaban pensados para
 * que el heading se leyera como una etiqueta sobre la linea horizontal
 * de la seccion 16 - esa linea ya no existe (la ocultamos), asi que ese
 * offset negativo quedaba como un corrimiento sin motivo y el texto se
 * perdia por el bajo contraste. Encabezado propio: mismo azul de marca,
 * mas peso, sin el offset heredado. */
.obj_issue_toc .sections .section > h2,
.obj_issue_toc .sections .section > h3 {
	position: static;
	left: auto;
	display: flex;
	align-items: center;
	gap: var(--rl-space-2);
	margin: 0 0 var(--rl-space-4) 0;
	padding: 0;
	background: none;
	font-size: 1.1em;
	font-weight: 700;
	color: var(--rl-color-primary);
	line-height: 1.3;
}

.obj_issue_toc .sections .section > h2::before,
.obj_issue_toc .sections .section > h3::before {
	content: "\f07c";
	font-family: FontAwesome;
	font-weight: normal;
	font-size: 0.9em;
}

/* =====================================================================
 * 22. Seccion "Avisos" de la portada
 * ===================================================================== *
 * El theme base oculta el <h2>Avisos</h2> por completo (clip + display:
 * none - solo queda para lectores de pantalla). Ahora que "Sobre la
 * revista" y "Numero actual" tienen un eyebrow visible con icono, dejar
 * este oculto se sentia como un salto sin anuncio de que hay una seccion
 * nueva empezando. Lo mostramos con el mismo tratamiento. */
.pkp_page_index .cmp_announcements h2 {
	display: flex !important;
	position: static !important;
	clip: auto !important;
	left: auto !important;
	align-items: center;
	gap: var(--rl-space-2);
	margin: 0 0 var(--rl-space-4) 0;
	font-size: 1em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--rl-color-primary);
}

.pkp_page_index .cmp_announcements h2::before {
	content: "\f0a1";
	font-family: FontAwesome;
	font-weight: normal;
}

/* Aviso destacado: un acento superior en el color de marca para
   diferenciarlo del resto sin depender solo del tamano/sombra.
   Calificado con ">" (hijo directo de .cmp_announcements) para que NO
   le pegue a los avisos secundarios de ".more" - antes se aplicaba a
   TODOS los ".obj_announcement_summary" y se le restaba el border-top
   solo a los de ".more", dejandolos con borde en 3 lados nomas (se
   veian "cortados" arriba, distintos al resto de tarjetas del sitio
   que siempre tienen los 4 lados). */
.cmp_announcements > .obj_announcement_summary {
	border-top: 3px solid var(--rl-color-primary);
}

.obj_announcement_summary .date::before {
	content: "\f073";
	font-family: FontAwesome;
	font-weight: normal;
	margin-right: 0.4em;
}

/* Los avisos secundarios (".more") no llevan el acento de color - son
   una lista compacta, no el destacado - y tampoco necesitan sombra al
   pasar el mouse (ya la tienen desactivada arriba, seccion "Avisos
   secundarios"), pero si una transicion sutil de fondo para dar
   feedback de que son clickeables. Border completo en los 4 lados
   (heredado de la regla base de ".obj_announcement_summary", sin
   restarle nada aca) para que se vean como una tarjeta terminada. */
.cmp_announcements .more .obj_announcement_summary {
	transition: background-color var(--rl-transition-fast);
}

.cmp_announcements .more .obj_announcement_summary:hover {
	background: var(--rl-color-primary-tint-08);
}

@media (prefers-reduced-motion: reduce) {
	.cmp_announcements .more .obj_announcement_summary:hover {
		transition: none;
	}
}

/* =====================================================================
 * 23. Scroll suave para anclas dentro de la misma pagina
 * ===================================================================== *
 * Mejora cualquier link con ancla del sitio (ej. "Ir al contenido
 * principal" del skip-link) para que salte con animacion en vez de un
 * salto brusco. Respeta prefers-reduced-motion. */
html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* =====================================================================
 * 24. Selector de idioma del sidebar: bandera real + nombre nativo
 * ===================================================================== *
 * El theme base ya muestra cada idioma en su propio nombre nativo
 * ("English", "espanol" - dato real de OJS, no algo que armamos) pero
 * sin ningun indicador visual. La bandera real (flagcdn, mismo
 * servicio que las tarjetas de "Alcance geografico") y la marca
 * semantica (nav/aria-current/hreflang) viven en el override de
 * plantilla (plugins/themes/rlArticleCards/templates/plugins/blocks/
 * languageToggle/block.tpl) - antes era un emoji puesto solo por CSS
 * (::before), que no es un elemento real con alt text: un lector de
 * pantalla no tenia forma de anunciar que ese icono era una bandera.
 * Si la revista agrega mas idiomas, esos no llevan bandera hasta que
 * se agregue el mapeo en la plantilla, pero el chip sigue funcionando
 * igual sin ella (la imagen se oculta sola via onerror).
 *
 * Grid en vez de flex-wrap - a pedido, para aprovechar mejor el ancho
 * disponible del bloque en la barra lateral: con flex-wrap los chips
 * quedaban del tamano de su contenido pegados a la izquierda, dejando
 * un hueco vacio grande a la derecha (mas notorio con solo 2 idiomas).
 * Primero se probo en 2 columnas ("auto-fit"/minmax) pero a pedido
 * quedo mal que los dos idiomas cayeran en la misma fila - ahora es
 * 1 sola columna, cada idioma en su propia fila, ocupando todo el
 * ancho del bloque (alineado a la izquierda en vez de centrado, se ve
 * mas como una lista de opciones que como chips sueltos). */
.block_language .content ul {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--rl-space-2);
	list-style: none;
	padding: 0;
}

.block_language .content li a {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5em;
	padding: 0.55em var(--rl-space-3);
	border-radius: var(--rl-radius-md);
	background: var(--rl-color-surface-hover);
	border: 1px solid transparent;
	text-decoration: none;
	font-size: 0.9em;
	line-height: 1;
	transition: box-shadow var(--rl-transition-base), border-color var(--rl-transition-base), transform var(--rl-transition-base);
}

/* Mismo efecto de hover que las tarjetas de "Alcance geografico"
   (.rl_geo_card:hover, seccion 25) - a pedido, en vez del cambio a
   azul que traia la regla generica de hover de la barra lateral
   (".pkp_structure_sidebar .pkp_block .content a:hover", seccion 2):
   tonos neutros (los mismos --rl-color-border-strong/--rl-shadow-3 de
   las cards), no azules. No aplica al idioma activo (".current"),
   que ya usa un fondo azul solido a proposito para marcar el estado -
   ver seccion 37 mas abajo para su propio hover. */
.block_language .content li:not(.current) a:hover {
	border-color: var(--rl-color-border-strong);
	box-shadow: var(--rl-shadow-3);
	transform: translateY(-1px);
	color: inherit;
}

.block_language .content li.current a {
	background: var(--rl-color-primary);
	color: #fff;
	font-weight: 600;
}

.block_language .locale_flag {
	flex-shrink: 0;
	width: 15px;
	height: 11px;
	border-radius: 1px;
	box-shadow: 0 0 0 1px var(--rl-color-border-strong);
	object-fit: cover;
}

.block_language .locale_name {
	text-transform: capitalize;
	line-height: 1;
}

/* =====================================================================
 * 25. Alcance geografico + Vistas y descargas (al final de la portada)
 * ===================================================================== *
 * Cifras reales (ver RlArticleCardsThemePlugin::getGeographyStatsHtml /
 * getUsageStatsHtml), inyectadas via override de indexJournal.tpl. Las
 * dos secciones comparten un mismo lenguaje visual: encabezado
 * centrado (etiqueta + titulo + bajada) y un panel blanco con tarjetas
 * de cifras, para que se vean como un solo sistema aunque una muestre
 * un mapa (jsVectorMap) y la otra un grafico de barras (Chart.js).
 *
 * Ubicacion: a pedido explicito, ninguna de las dos debe angostarse ni
 * verse afectada por la barra lateral, y la barra lateral "sticky"
 * (seccion 18) debe soltarse justo donde termina su propia columna en
 * vez de seguir pegada durante todo el scroll de estas 2 secciones (ya
 * bastante altas por el mapa/grafico). Intentamos resolver esto por
 * CSS (margenes negativos para "escapar" del float angostado por la
 * barra lateral, mas z-index para pintar por encima de la barra
 * sticky) pero la barra seguia estando ahi, sticky, detras - solo
 * tapada. La solucion real esta en indexJournal.tpl: estas 2 secciones
 * se imprimen DESPUES de donde cierran ".pkp_structure_main" y
 * ".pkp_structure_sidebar" (incluso antes que el pie de pagina), no
 * adentro de la columna principal. Asi ".pkp_structure_main" vuelve a
 * medir solo el contenido "normal" de la portada, la barra lateral se
 * suelta ahi, y estas secciones quedan como bloques comunes fuera de
 * cualquier float - ya no hace falta ningun truco de posicionamiento,
 * solo el mismo contenedor centrado de ancho fijo por breakpoint que
 * usa el resto del sitio (".pkp_structure_content" en body.less:
 * 728px / 952px / 1160px). */
.rl_full_bleed_inner {
	width: 100%;
	padding: 0 var(--rl-space-4);
	margin: 0 auto;
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.rl_full_bleed_inner {
		width: 728px;
		padding: 0;
	}
}

@media (min-width: 992px) {
	.rl_full_bleed_inner {
		width: 952px;
	}
}

@media (min-width: 1200px) {
	.rl_full_bleed_inner {
		width: 1160px;
	}
}

.rl_geo_stats,
.rl_usage_stats {
	margin-top: var(--rl-space-6);
}

/* Encabezado centrado: etiqueta con icono, titulo y bajada - igual
   forma para ambas secciones, solo cambia el texto/icono. */
.rl_stats_heading {
	max-width: 640px;
	margin: 0 auto var(--rl-space-5);
	text-align: center;
}

.rl_stats_tag {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.3em var(--rl-space-3);
	border-radius: var(--rl-radius-full);
	background: var(--rl-color-primary-tint-08);
	color: var(--rl-color-primary);
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.rl_stats_title {
	margin: var(--rl-space-3) 0 var(--rl-space-2);
	font-size: 1.5em;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.rl_stats_subtitle {
	margin: 0;
	opacity: 0.7;
	font-size: 0.95em;
	line-height: 1.5;
}

/* Panel blanco que contiene filtros, cifras y el mapa/grafico. */
.rl_stats_panel {
	padding: var(--rl-space-5);
	border-radius: var(--rl-radius-xl);
	background: var(--rl-color-surface);
	border: 1px solid var(--rl-color-border);
	box-shadow: var(--rl-shadow-3);
}

@media (min-width: 768px) {
	.rl_stats_panel {
		padding: var(--rl-space-6);
	}
}

.rl_geo_filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--rl-space-3);
	margin-bottom: var(--rl-space-5);
}

.rl_geo_filters label {
	display: flex;
	align-items: center;
	gap: var(--rl-space-2);
	font-size: 0.85em;
	font-weight: 600;
	opacity: 0.75;
}

.rl_geo_filters select {
	padding: 0.35em var(--rl-space-3);
	border-radius: var(--rl-radius-md);
	border: 1px solid var(--rl-color-border);
	background: var(--rl-color-surface-subtle);
	font-size: 0.95em;
}

/* Tarjetas de cifras (3 por seccion): icono en circulo de color +
   numero grande + etiqueta. Mismo componente para "Alcance
   geografico" (paises/autores/pais principal) y "Vistas y descargas"
   (vistas/descargas/promedio). */
.rl_stats_tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--rl-space-3);
	margin-bottom: var(--rl-space-5);
}

@media (max-width: 700px) {
	.rl_stats_tiles {
		grid-template-columns: 1fr;
	}
}

/* "Vistas y descargas" tiene 4 cifras (resumen/numero/descargas/promedio)
   en vez de las 3 que usa "Alcance geografico" - variante propia en vez
   de tocar ".rl_stats_tiles" (compartida por las 2 secciones). */
.rl_stats_tiles--4 {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
	.rl_stats_tiles--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 700px) {
	.rl_stats_tiles--4 {
		grid-template-columns: 1fr;
	}
}

.rl_stats_tile[data-tone="issue"] .rl_stats_tile_icon {
	background: rgba(124, 58, 237, 0.12);
	color: #7c3aed;
}

.rl_stats_tile {
	display: flex;
	align-items: center;
	gap: var(--rl-space-3);
	padding: var(--rl-space-4);
	border-radius: var(--rl-radius-lg);
	background: var(--rl-color-surface-subtle);
	border: 1px solid var(--rl-color-border);
}

.rl_stats_tile_icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: var(--rl-radius-full);
	background: var(--rl-color-primary-tint-12);
	color: var(--rl-color-primary);
	font-size: 1.3em;
}

.rl_stats_tile[data-tone="warning"] .rl_stats_tile_icon {
	background: var(--rl-color-accent-warning-tint-12);
	color: var(--rl-color-accent-warning);
}

.rl_stats_tile_body {
	min-width: 0;
}

.rl_stats_tile_label {
	font-size: 0.8em;
	font-weight: 600;
	opacity: 0.65;
}

.rl_stats_tile_value {
	font-size: 1.35em;
	font-weight: 700;
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Caja del mapa: cabecera con icono/etiqueta a la izquierda y
   leyenda de densidad (gradiente) a la derecha, igual criterio que el
   resto del sitio para "cabecera de bloque + contenido". */
.rl_geo_map_box {
	margin-bottom: var(--rl-space-5);
	padding: var(--rl-space-4);
	border-radius: var(--rl-radius-lg);
	background: var(--rl-color-surface-subtle);
	border: 1px solid var(--rl-color-border);
}

.rl_geo_map_box_head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--rl-space-3);
	margin-bottom: var(--rl-space-3);
}

.rl_geo_map_box_label {
	display: flex;
	align-items: center;
	gap: var(--rl-space-2);
	font-weight: 700;
	font-size: 0.9em;
}

.rl_geo_map_box_label i {
	color: var(--rl-color-primary);
}

.rl_geo_map_legend {
	display: flex;
	align-items: center;
	gap: var(--rl-space-2);
	font-size: 0.75em;
	font-weight: 600;
	opacity: 0.7;
}

.rl_geo_map_legend_bar {
	width: 80px;
	height: 8px;
	border-radius: var(--rl-radius-full);
	background: linear-gradient(90deg, var(--rl-color-primary-tint-16) 0%, var(--rl-color-primary) 100%);
}

.rl_geo_map {
	height: 760px;
	border-radius: var(--rl-radius-md);
	background: var(--rl-color-surface);
}

@media (max-width: 600px) {
	.rl_geo_map {
		height: 460px;
	}
}

/* jsVectorMap pinta sus propios controles de zoom - solo los alineamos
   con el resto de la paleta del sitio en vez de dejar su estilo default. */
.jvm-zoom-btn {
	background: var(--rl-color-surface) !important;
	color: var(--rl-color-primary) !important;
	border: 1px solid var(--rl-color-border) !important;
}

/* Grilla de tarjetas de pais: bandera real (flagcdn), nombre,
   cantidad + porcentaje en una insignia, y una barra de progreso
   relativa al pais con mas articulos - mismo patron visual que las
   tarjetas de cifras de arriba (fondo sutil + borde), no una lista. */
.rl_geo_grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--rl-space-3);
	list-style: none;
	padding: 0;
	margin: 0;
}

@media (max-width: 900px) {
	.rl_geo_grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.rl_geo_grid {
		grid-template-columns: 1fr;
	}
}

.rl_geo_card {
	padding: var(--rl-space-3);
	border-radius: var(--rl-radius-lg);
	background: var(--rl-color-surface-subtle);
	border: 1px solid var(--rl-color-border);
	transition: box-shadow var(--rl-transition-base), border-color var(--rl-transition-base), transform var(--rl-transition-base);
}

/* Mismo patron de hover que las tarjetas de articulo (seccion 6) -
   estas cards no tenian ningun feedback al pasar el mouse, a pedido. */
.rl_geo_card:hover {
	box-shadow: var(--rl-shadow-3);
	border-color: var(--rl-color-border-strong);
	transform: translateY(-2px);
}

.rl_geo_card_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rl-space-2);
	margin-bottom: var(--rl-space-2);
}

.rl_geo_card_id {
	display: flex;
	align-items: center;
	gap: var(--rl-space-2);
	min-width: 0;
}

.rl_geo_card_flag {
	flex-shrink: 0;
	border-radius: 2px;
	box-shadow: 0 0 0 1px var(--rl-color-border-strong);
}

.rl_geo_card_name {
	overflow: hidden;
	font-weight: 700;
	font-size: 0.85em;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rl_geo_card_pct {
	flex-shrink: 0;
	padding: 0.15em var(--rl-space-2);
	border-radius: var(--rl-radius-full);
	background: var(--rl-color-primary-tint-12);
	color: var(--rl-color-primary);
	font-size: 0.75em;
	font-weight: 700;
	white-space: nowrap;
}

.rl_geo_card_pct small {
	font-weight: 600;
	opacity: 0.75;
}

.rl_geo_card_bar {
	height: 5px;
	border-radius: var(--rl-radius-full);
	background: var(--rl-color-border);
	overflow: hidden;
}

.rl_geo_card_bar_fill {
	height: 100%;
	border-radius: var(--rl-radius-full);
	background: linear-gradient(90deg, var(--rl-color-primary) 0%, var(--rl-color-primary-dark) 100%);
	transition: width var(--rl-transition-base);
}

/* Nota al pie, comun a ambas secciones. */
.rl_stats_footer_note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--rl-space-2);
	margin-top: var(--rl-space-5);
	padding-top: var(--rl-space-4);
	border-top: 1px solid var(--rl-color-border);
	font-size: 0.85em;
	opacity: 0.7;
}

.rl_stats_footer_note i {
	color: var(--rl-color-primary);
}

.rl_stats_legend_chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-right: var(--rl-space-3);
	font-weight: 600;
}

.rl_stats_legend_dot {
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	border-radius: 2px;
}

/* Grafico de vistas/descargas. */
.rl_usage_chart_wrap {
	position: relative;
	height: 380px;
}

@media (max-width: 600px) {
	.rl_usage_chart_wrap {
		height: 280px;
	}
}

/* =====================================================================
 * 26. "Avisos" de la portada: columnas desalineadas por floats
 * ===================================================================== *
 * Causa raiz confirmada midiendo getBoundingClientRect() en vivo:
 * ".cmp_announcements.highlight_first" arma el layout con floats (el
 * aviso destacado flota a 65% de ancho, ".more" a 35% - ver
 * styles/pages/indexJournal.less del tema base), y los floats NUNCA
 * igualan su altura entre si. Cuando un titulo de la lista de "mas
 * avisos" ocupa 2 lineas, esa columna queda mas alta que la tarjeta
 * destacada y sobresale por debajo - se ve "descuadrado" aunque
 * ningun borde este roto. Grid con align-items:stretch es el arreglo
 * estandar para este problema (no hay forma de igualar alturas de 2
 * floats independientes solo con CSS de otra manera). No pisa la
 * seccion 22 (acento de color, iconos, hover de ".more") ni el grid
 * interno que ".more" ya tenia para separar sus propios avisos
 * secundarios (seccion 6) - solo cambia como se acomodan ENTRE SI el
 * destacado y ".more" como conjunto.
 *
 * Correccion (regresion del parche anterior): ".cmp_announcements.
 * highlight_first" tiene 4 hijos directos, no 2 - el <a id=
 * "homepageAnnouncements"> vacio y el <h2>Avisos</h2> tambien son
 * hijos directos (ver templates/frontend/objects/announcements_list.
 * tpl del tema base). Al convertir el contenedor en grid de 2
 * columnas sin excluirlos, el auto-placement los metia tambien ahi,
 * empujando el encabezado a un lugar raro y rompiendo el bloque
 * entero. "grid-column:1/-1" los fuerza a ocupar la fila completa,
 * dejando las 2 columnas solo para el destacado y ".more". */
.cmp_announcements.highlight_first {
	display: grid;
	grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
	gap: var(--rl-space-4);
	align-items: stretch;
}

.cmp_announcements.highlight_first > a,
.cmp_announcements.highlight_first > h2 {
	grid-column: 1 / -1;
}

.cmp_announcements.highlight_first > .obj_announcement_summary,
.cmp_announcements.highlight_first > .more {
	float: none;
	width: auto;
}

.cmp_announcements.highlight_first > .more {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.cmp_announcements.highlight_first > .more .obj_announcement_summary {
	margin-bottom: 0;
}

@media (max-width: 768px) {
	.cmp_announcements.highlight_first {
		grid-template-columns: 1fr;
	}
}

/* =====================================================================
 * 27. Barra de navegacion: subrayado animado + flecha de submenu
 * ===================================================================== *
 * A pedido, inspirado en un ejemplo de referencia pero con lo que el
 * sitio ya tiene - nada de Bootstrap ".navbar/.collapse/.container"
 * (no esta cargado, solo su JS de dropdown, ver DefaultThemePlugin::
 * init) ni de contenido inventado (el logo real ya es una imagen con
 * el nombre de la revista adentro; no se le agrega un texto duplicado
 * al lado). Lo que si se puede mejorar sin inventar nada: un subrayado
 * animado en los links del menu principal (mismo truco que ya usa el
 * titulo de las tarjetas de articulo) y una flecha chica en los items
 * que abren submenu (Acerca de, Numeros, etc.), para que se note antes
 * de pasar el mouse que hay mas opciones ahi. */
@media (min-width: 992px) {
	.pkp_navigation_primary_wrapper .pkp_navigation_primary > li > a {
		position: relative;
	}

	.pkp_navigation_primary_wrapper .pkp_navigation_primary > li > a::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0.3em;
		height: 2px;
		border-radius: var(--rl-radius-full);
		background: var(--rl-color-primary);
		transform: scaleX(0);
		transition: transform var(--rl-transition-fast);
	}

	.pkp_navigation_primary_wrapper .pkp_navigation_primary > li > a:hover::after,
	.pkp_navigation_primary_wrapper .pkp_navigation_primary > li > a:focus-visible::after {
		transform: scaleX(1);
	}

	/* Flecha solo en items con submenu real (tienen un <ul> hijo) - no
	   en "Inicio", que es un link directo sin dropdown. */
	.pkp_navigation_primary_wrapper .pkp_navigation_primary > li:has(> ul) > a::before {
		content: "\f107";
		font-family: FontAwesome;
		font-weight: normal;
		margin-left: 0.35em;
		font-size: 0.85em;
		opacity: 0.6;
		transition: transform var(--rl-transition-fast);
	}

	.pkp_navigation_primary_wrapper .pkp_navigation_primary > li:has(> ul):hover > a::before {
		transform: rotate(180deg);
	}

	/* Mismo tratamiento en la barra de utilidad ("Acceder", "Idioma" -
	   los 2 unicos items con submenu ahi arriba; el ISSN es un link
	   directo, sin flecha). */
	.pkp_navigation_user > li:has(> ul) > a::after {
		content: "\f107";
		font-family: FontAwesome;
		font-weight: normal;
		margin-left: 0.35em;
		font-size: 0.85em;
		opacity: 0.75;
		display: inline-block;
		transition: transform var(--rl-transition-fast);
	}

	.pkp_navigation_user > li:has(> ul):hover > a::after {
		transform: rotate(180deg);
	}

	/* Un poco de aire entre ISSN / ISSN / Acceder / Idioma - antes se
	   apoyaban solo en el padding propio de cada link, que se sentia
	   apretado en una franja tan angosta. */
	.pkp_navigation_user > li {
		margin-left: var(--rl-space-3);
	}
}

/* Boton de menu mobile: mismo azul de marca en vez del color generico
   que hereda de "@text-bg-base" (pensado para cuando el header tiene
   una imagen de fondo oscura, no el fondo blanco liso por defecto). */
.pkp_site_nav_toggle {
	box-shadow: none;
	background: var(--rl-color-primary-tint-08);
}

.pkp_site_nav_toggle > span,
.pkp_site_nav_toggle > span::before,
.pkp_site_nav_toggle > span::after {
	border-color: var(--rl-color-primary);
	background: var(--rl-color-primary);
}

/* =====================================================================
 * 28. Resumen del numero (".description"), reubicado despues del PDF
 * ===================================================================== *
 * Orden pedido: DOI > Publicado > Numero completo (PDF) > Resumen. El
 * reordenamiento real esta en el override de plantulla (rlArticleCards/
 * templates/frontend/objects/issue_toc.tpl) - esto solo le da forma de
 * tarjeta, mismo tratamiento que el resumen de un articulo
 * (".item.abstract" en la pagina de detalle), para que se note que es
 * un bloque de texto aparte y no una continuacion del boton de arriba. */
.obj_issue_toc .description {
	margin-top: var(--rl-space-4);
	padding: var(--rl-space-5);
	border-radius: var(--rl-radius-lg);
	background: var(--rl-color-surface-subtle);
	border: 1px solid var(--rl-color-border);
}

/* =====================================================================
 * 29. Barra lateral: icono por bloque + titulo de "indizaciones" visible
 * ===================================================================== *
 * Inspirado en un ejemplo de referencia (cada bloque con un icono al
 * lado del titulo) pero con los bloques reales que esta revista tiene
 * - no se inventan bloques nuevos (citas de Google Scholar, WhatsApp,
 * etc. que no existen aca). Mismo truco por bloque que ya se usa en
 * ".pkp_page_index .cmp_announcements h2::before" (seccion 22).
 *
 * "indizaciones" (el bloque con los logos de Scopus/WOS/SciELO/etc.)
 * tenia el titulo oculto con ".pkp_screen_reader" - mismo criterio que
 * "Avisos" (seccion 22): un titulo visible ayuda a entender que hay
 * ahi antes de leer el contenido, asi que se revela con el mismo
 * mecanismo (anular las propiedades de ".pkp_screen_reader" solo para
 * este titulo puntual, sin tocar el contenido HTML real del bloque). */
.block_language .title::before {
	content: "\f0ac";
	font-family: FontAwesome;
	font-weight: normal;
	margin-right: 0.5em;
	color: var(--rl-color-primary);
}

.block_web_feed .title::before {
	content: "\f09e";
	font-family: FontAwesome;
	font-weight: normal;
	margin-right: 0.5em;
	color: var(--rl-color-primary);
}

#customblock-indizaciones .title.pkp_screen_reader {
	display: block !important;
	position: static !important;
	clip: auto !important;
	width: auto !important;
	height: auto !important;
	overflow: visible !important;
	padding-bottom: var(--rl-space-2);
	border-bottom: 2px solid var(--rl-color-primary-tint-16);
	text-transform: uppercase;
	font-size: 0.85em;
	letter-spacing: 0.04em;
}

#customblock-indizaciones .title.pkp_screen_reader::before {
	content: "\f091";
	font-family: FontAwesome;
	font-weight: normal;
	margin-right: 0.5em;
	color: var(--rl-color-primary);
}

/* =====================================================================
 * 30. Texto de apoyo debajo del boton de "Numero completo"
 * ===================================================================== *
 * Agregado en el override de plantilla (issue_toc.tpl) - va entre el
 * titulo ("Numero completo:") y el boton de descarga; solo el estilo
 * (texto chico, atenuado) vive aca. */
.obj_issue_toc .galleys_caption {
	margin: 0 0 var(--rl-space-2);
	font-size: 0.85em;
	opacity: 0.65;
}

/* =====================================================================
 * 31. Selector de idioma (sidebar): la pildora perdia su padding
 * ===================================================================== *
 * ".pkp_structure_sidebar .pkp_block .content a" (regla generica del
 * tema base, pensada para bloques como "Ultimas publicaciones") tiene
 * MAS especificidad (3 clases) que ".block_language .content li a" (2
 * clases + 2 elementos) - ganaba pase lo que pase el orden de carga y
 * le dejaba "padding: 0.15em 0" (el horizontal en 0), asi que la
 * pildora se veia como texto suelto con la bandera pegada en vez de
 * un boton con la forma/espaciado que la seccion 24 ya definia.
 * Se repite la regla calificada con 2 clases mas para igualar/superar
 * esa especificidad. Valores sincronizados con la seccion 24 (grid a
 * ancho completo). */
.pkp_structure_sidebar .pkp_block.block_language .content li a {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5em;
	padding: 0.55em var(--rl-space-3);
}

/* =====================================================================
 * 32. Header: franja de utilidad (ISSN/idioma/usuario) de ancho completo
 * ===================================================================== *
 * ".pkp_navigation_user_wrapper" (el tema base) es "position:absolute;
 * left:50%; transform:translateX(-50%);" SIN un "width" propio - una
 * caja del ancho de su contenido, centrada, no una franja que ya ocupe
 * todo el ancho. Se cambia "left:50%/transform" por "left:0;right:0;"
 * (ambos anclados = la caja pasa a medir el ancho completo de
 * ".pkp_head_wrapper", el mismo ancho fijo por breakpoint que ya usa
 * el logo/menu de abajo). Efecto secundario esperado: el contenido de
 * esta franja (que ya tiene text-align:right) pasa de verse centrado a
 * alineado a la derecha del contenedor.
 *
 * A pedido, SIN cambiar de color: se probo un tono mas oscuro para
 * diferenciar esta franja de las otras 2, pero se alejaba del celeste
 * propio de la revista - queda con el mismo azul base en toda la
 * cabecera, solo se corrige el ancho. */
.pkp_navigation_user_wrapper {
	left: 0;
	right: 0;
	transform: none;
}

.pkp_head_wrapper {
	padding-top: var(--rl-space-6);
}

/* =====================================================================
 * 34: Menu mobile (hamburguesa): mas aire para tocar comodo
 * ===================================================================== *
 * El tema base deja los links del menu con "padding: 0.125rem 0" (menos
 * de 2px verticales) - suficiente para un mouse, incomodo para el dedo
 * en un celular. Se ensancha el area de toque y se agrega una linea
 * sutil entre items de primer nivel, sin tocar el mecanismo de
 * apertura/cierre (js del tema base, boton ".pkp_site_nav_toggle"). */
@media (max-width: 991px) {
	.pkp_site_nav_menu .pkp_navigation_primary > li > a {
		display: block;
		padding: var(--rl-space-3) var(--rl-space-2);
		border-radius: var(--rl-radius-sm);
	}

	.pkp_site_nav_menu .pkp_navigation_primary > li {
		border-bottom: 1px solid var(--rl-color-primary-tint-16);
	}

	.pkp_site_nav_menu .pkp_navigation_primary > li:last-child {
		border-bottom: none;
	}

	.pkp_site_nav_menu .pkp_navigation_primary > li > a:hover,
	.pkp_site_nav_menu .pkp_navigation_primary > li > a:focus {
		background: var(--rl-color-primary-tint-08);
		text-decoration: none;
	}

	.pkp_site_nav_menu .pkp_navigation_primary ul a {
		display: block;
		padding: var(--rl-space-2) var(--rl-space-2);
	}
}

/* =====================================================================
 * 35: Pagina "Sobre la revista" (about.tpl): contenido WYSIWYG plano
 * ===================================================================== *
 * El contenido real (ISSN/DOI, Mision en 3 idiomas, Enfoque, Politicas
 * editoriales, Revision por pares, Indizada/Resumida) es HTML libre
 * cargado por el gestor de la revista via el editor de texto de OJS -
 * no hay clases propias por seccion, solo <h2 class="title">, parrafos
 * "<p><strong>Etiqueta:</strong>...</p>" y listas sueltas. Como no se
 * puede seleccionar por texto en CSS, el criterio es estructural:
 * cualquier parrafo que EMPIECE con un <strong> se trata como
 * encabezado de seccion (cubre Mision/Enfoque/Idioma de publicacion/
 * Periodicidad/Politicas editoriales/Revision por pares/Indizada), y
 * cualquier lista que le siga se estiliza igual - funciona sin
 * importar que texto tenga cada uno, y sigue funcionando si el gestor
 * edita/agrega una seccion nueva con el mismo patron. */
.page_about h2.title {
	margin-top: 0;
	padding-bottom: var(--rl-space-2);
	border-bottom: 2px solid var(--rl-color-primary-tint-16);
	color: var(--rl-color-primary);
	font-size: 1.5em;
}

/* El primer parrafo (ISSN/DOI) es un caso aparte: no es un
   "encabezado de seccion", es un dato de identificacion que va justo
   debajo del titulo - se destaca como una barra compacta en vez de
   heredar el mismo tratamiento que las secciones de mas abajo. */
.page_about h2.title + p {
	display: inline-block;
	padding: var(--rl-space-2) var(--rl-space-4);
	border-radius: var(--rl-radius-full);
	background: var(--rl-color-surface-subtle);
	font-size: 0.9em;
}

.page_about > p:has(> strong:first-child) {
	margin-top: var(--rl-space-6);
	margin-bottom: var(--rl-space-2);
	font-size: 1.05em;
	color: var(--rl-color-primary);
}

.page_about h2.title + p:has(> strong:first-child) {
	/* No se cuenta como "encabezado de seccion" - ya tiene su propio
	   estilo de barra de arriba. */
	margin-top: 0;
	color: inherit;
	font-size: inherit;
}

.page_about ul {
	display: flex;
	flex-direction: column;
	gap: var(--rl-space-2);
	padding: 0;
	margin: 0 0 var(--rl-space-4);
	list-style: none;
}

.page_about ul li {
	position: relative;
	padding-left: var(--rl-space-5);
}

.page_about ul li::before {
	content: "\f00c";
	font-family: FontAwesome;
	font-weight: normal;
	position: absolute;
	left: 0;
	top: 0.1em;
	color: var(--rl-color-primary);
	font-size: 0.85em;
}

.page_about ul a {
	font-weight: 600;
}

/* =====================================================================
 * 38: "Indizada/Resumida" duplicado en el bloque de la barra lateral
 * ===================================================================== *
 * El bloque tenia 2 titulos apilados: el <h2> del bloque (antes oculto,
 * se revelo en la seccion 29 con el texto "indizaciones") y, adentro
 * del contenido HTML libre que carga el gestor, un <span class="title">
 * con el texto "Indizada/Resumida" - quedaban 2 encabezados casi
 * iguales, uno debajo del otro. A pedido se oculta el segundo (el que
 * viene con el contenido), se queda el <h2> del bloque como unico
 * titulo. No se toca el contenido real en la base de datos, solo se
 * oculta por CSS - reversible sin perder el texto original. */
#customblock-indizaciones .content > p:first-child {
	display: none;
}

/* =====================================================================
 * 39: Header - interaccion de la franja de utilidad (bloque 1) y el
 *     menu principal (bloque 3), SIN cambiar ningun color
 * ===================================================================== *
 * A pedido explicito: nada de fondos/colores nuevos - solo feedback de
 * interaccion (opacidad, transform, transicion, subrayado, foco
 * visible) para que ambos bloques se sientan mas "vivos" al usar
 * mouse/teclado, dejando la paleta celeste intacta. */
.pkp_navigation_user_wrapper a,
.pkp_navigation_primary_wrapper a {
	transition: opacity var(--rl-transition-fast), transform var(--rl-transition-fast);
}

.pkp_navigation_user_wrapper a:hover,
.pkp_navigation_user_wrapper a:focus-visible {
	opacity: 0.7;
}

.pkp_navigation_user_wrapper a:active,
.pkp_navigation_primary_wrapper a:active {
	transform: scale(0.97);
}

/* Subrayado animado en la franja de utilidad - mismo truco que ya usa
   el menu principal (seccion 27). Va en "::before" (no "::after") a
   proposito: "::after" en estos mismos links ya lo usa la flechita de
   submenu de "Acceder"/"Idioma" (seccion 27) - usar el mismo pseudo-
   elemento para las 2 cosas pisaria el "content" de la flecha. */
@media (min-width: 992px) {
	.pkp_navigation_user > li > a {
		position: relative;
	}

	.pkp_navigation_user > li > a::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -0.2em;
		height: 1.5px;
		background: currentColor;
		opacity: 0.6;
		transform: scaleX(0);
		transition: transform var(--rl-transition-fast);
	}

	.pkp_navigation_user > li > a:hover::before,
	.pkp_navigation_user > li > a:focus-visible::before {
		transform: scaleX(1);
	}
}

/* Apertura/cierre de los desplegables (Acerca de, Numeros, Acceder,
   Idioma) con una transicion suave en vez de aparecer/desaparecer de
   golpe - Bootstrap/Popper solo alternan la clase ".show", la
   transicion la agrega este CSS. */
.dropdown-menu {
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity var(--rl-transition-fast), transform var(--rl-transition-fast);
	pointer-events: none;
}

.dropdown-menu.show {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.pkp_navigation_user_wrapper a:active,
	.pkp_navigation_primary_wrapper a:active {
		transform: none;
	}

	.dropdown-menu {
		transition: none;
		transform: none;
	}
}

/* Bug real, no pedido a proposito: el tema base invierte los colores
   al hacer foco/click (":focus { background:@text-bg-base;
   color:@bg-base; }", en ambos bloques) - pensado para un header con
   fondo oscuro, donde ese "texto claro sobre fondo oscuro" tendria
   sentido. En esta paleta @text-bg-base resulta casi negro, asi que
   el elemento clickeado se ve con un fondo negro feo (y en el caso de
   "Buscar", el texto quedaba del mismo tono que su propio fondo nuevo
   - por eso se veia "invisible" justo despues del click). Se anula el
   intercambio de colores del tema base; el feedback de foco/click ya
   lo da el subrayado + la opacidad + el "outline" de mas arriba. */
.pkp_navigation_user > li > a:focus,
.pkp_navigation_primary_wrapper a:focus,
.pkp_navigation_primary_wrapper a:hover {
	background: transparent;
	color: inherit;
}

/* Foco de teclado visible y consistente (antes dependia del outline
   por defecto del navegador, que en fondos de color a veces se pierde
   de vista) - mismo estilo de foco que ya se usa en el resto del
   sitio (seccion 2), sin introducir un color nuevo. */
.pkp_navigation_user_wrapper a:focus-visible,
.pkp_navigation_primary_wrapper a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: var(--rl-radius-sm);
}

/* =====================================================================
 * 33. "Numero completo": encabezado con estilo roto (caja blanca +
 *     desplazamiento -15px, pensado para una linea divisoria que ya
 *     no existe)
 * =====================================================================
 * Diagnostico: el tema base tiene este patron para el h3/h2 dentro de
 * ".galleys"/".section" en el indice de numero:
 *
 *   .obj_issue_toc .galleys > h2, .obj_issue_toc .section > h2,
 *   .obj_issue_toc .galleys > h3, .obj_issue_toc .section > h3 {
 *     display:inline-block; position:relative; left:-15px;
 *     padding:0 1.0715rem; background:#fff; font-weight:400;
 *     color:rgba(0,0,0,.54); ...
 *   }
 *
 * Es el clasico "rotulo tipo pestana" que se dibuja ENCIMA de una
 * linea divisoria (el ::before con border-top que ya ocultamos en la
 * seccion 16 de este mismo archivo, por el bug de "las lineas"). Sin
 * esa linea debajo, el rotulo queda flotando: caja blanca de fondo,
 * corrido 15px a la izquierda, gris y sin peso - se ve roto/huerfano,
 * no como una etiqueta con sentido.
 *
 * Ademas, ya existia un intento de arreglarlo en este archivo
 * (".obj_issue_toc .galleys_heading") pero nunca ganaba porque el
 * selector del tema base incluye el elemento "h3" y por eso tiene mas
 * especificidad (2 clases + 1 elemento vs. 2 clases). Por eso seguia
 * viendose con el estilo roto pese a existir esa regla.
 *
 * Fix: iguala el selector completo (clases + elemento) para ganar por
 * especificidad, quita la caja blanca / el corrimiento -15px (ya no
 * hay linea que "tapar"), y lo deja como una etiqueta pequena en
 * mayusculas consistente con el resto de las tarjetas ("NUMERO
 * ACTUAL", etc). Se quita tambien el "::after" que agregaba ":" - no
 * hace falta, ya no queda pegado a nada en la misma linea.
 * ===================================================================== */
.obj_issue_toc .galleys > h2,
.obj_issue_toc .galleys > h3,
.obj_issue_toc .galleys_heading {
	display: block;
	position: static;
	left: auto;
	margin: 0 0 var(--rl-space-1);
	padding: 0;
	background: none;
	font-size: 0.85em;
	font-weight: 700;
	line-height: 1.3;
	color: var(--rl-color-primary-dark);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.obj_issue_toc .galleys_heading::after {
	content: "";
}

/* =====================================================================
 * 34. Botones flotantes (correo y "volver arriba"): color equivocado
 * =====================================================================
 * ".rl_float_btn" usa @rl-primary en article-cards.less, que es un
 * alias de @bg-base (el "color primario" configurado en Apariencia -
 * el celeste plano del header, #8eb1cd en esta revista), NO el token
 * --rl-color-primary (#1e6292) que usa el resto de los botones del
 * rediseno (".block_make_submission_link", CTA del hero, etc). Por
 * eso se veian con un celeste distinto al azul del resto del sitio.
 *
 * Como este archivo se carga despues del bundle "stylesheet" (que
 * incluye article-cards.less - ver DefaultThemePlugin::init(), el
 * addStyle('stylesheet', ...) va antes que el addStyle('modern-overrides', ...)),
 * alcanza con repetir el mismo selector (misma especificidad) para
 * que gane por orden de carga, sin necesitar !important.
 *
 * OJO: el selector de estado tiene que calcar exacto al del tema base
 * (":hover, :focus") y no ":focus-visible" - con foco por click de
 * mouse (no teclado) ":focus-visible" no siempre se activa, y en ese
 * caso la regla base (celeste) seguiria ganando al no tener con que
 * empatar y perder por orden de carga. */
.rl_float_btn {
	background: var(--rl-color-primary);
}

.rl_float_btn:hover,
.rl_float_btn:focus {
	background: var(--rl-color-primary-dark);
}

/* =====================================================================
 * 35. Categorias del indice (Articulos / Resenas): demasiado espacio
 *     entre si y sin nada que las diferencie
 * =====================================================================
 * Diagnostico: cada ".section" (Articulos, Resenas, etc.) tiene
 * "margin: 30px -30px" (el -30px horizontal es un truco a proposito
 * para que el fondo de la tarjeta llegue de borde a borde) MAS
 * "padding: 30px" en las 4 direcciones. Entre el final de una seccion
 * y el titulo de la siguiente eso suma: padding-bottom de la primera
 * (30px) + el margen colapsado entre ambas (30px) + padding-top de la
 * siguiente (30px) = 90px de espacio en blanco - de ahi que "Resenas"
 * apareciera lejos de los articulos de arriba, sin nada que marque que
 * empezo una categoria nueva.
 *
 * El encabezado de cada seccion (".obj_issue_toc .sections .section >
 * h2/h3", seccion 21 de este mismo archivo) ya tiene color:
 * var(--rl-color-primary) puesto - un borde sin color declarado toma
 * ese mismo color por defecto (currentColor), asi que solo hacia falta
 * darle ancho y estilo para que se vea.
 *
 * Fix: se achica el margin/padding vertical de cada seccion (de 30px a
 * var(--rl-space-4) = 16px), y se agrega la linea azul debajo del
 * titulo de cada categoria (mismo --rl-color-primary que ya tenia el
 * texto). El margin-bottom de aca pisa el de la seccion 21 (misma
 * especificidad, esta regla va despues en el archivo). */
.obj_issue_toc .sections .section {
	margin-top: var(--rl-space-4);
	margin-bottom: var(--rl-space-4);
	padding-top: var(--rl-space-4);
	padding-bottom: var(--rl-space-4);
}

.obj_issue_toc .sections .section > h2,
.obj_issue_toc .sections .section > h3 {
	border-bottom: 2px solid var(--rl-color-primary);
	padding-bottom: var(--rl-space-2);
	margin-bottom: var(--rl-space-3);
}

/* =====================================================================
 * 36. Botones de galeria en los cards de articulo (PDF/HTML/XML/EPUB):
 *     un poco mas redondeados
 * =====================================================================
 * ".obj_galley_link" viene del tema base con "border-radius: 3px" -
 * casi recto. A pedido, mismo radio que el resto de los botones
 * secundarios del sitio (--rl-radius-md, 8px) en vez del valor fijo
 * del tema. No hace falta tocar ".obj_galley_link_supplementary" (los
 * "otros formatos" del galley principal) - el tema base lo dibuja
 * como link de texto plano, sin caja ni fondo, asi que un radio no le
 * cambiaria nada. Tampoco se toca ".obj_issue_toc .galleys
 * .obj_galley_link" (el boton de "Numero completo" en el indice del
 * numero, seccion 20) - ya tiene su propio border-radius:
 * var(--rl-radius-md) puesto aparte, mismo valor. */
.obj_galley_link {
	border-radius: var(--rl-radius-md);
}

/* =====================================================================
 * 37. Selector de idioma (sidebar): el hover del idioma activo era
 *     ilegible (texto oscuro sobre fondo oscuro)
 * =====================================================================
 * Diagnostico: el chip del idioma activo (".block_language .content
 * li.current a") ya tiene fondo solido "--rl-color-primary" (azul) +
 * texto blanco (seccion 24). Pero la regla generica de hover de TODO
 * link de bloque de sidebar (".pkp_structure_sidebar .pkp_block
 * .content a:hover", seccion 2) tiene mas especificidad (4 clases) que
 * la regla del chip activo (3 clases + 2 elementos) y solo toca
 * "color", no "background" - al pasar el mouse por el idioma activo
 * el texto quedaba "--rl-color-primary-dark" (azul oscuro) ENCIMA de
 * un fondo que ya es azul solido: texto practicamente invisible, sin
 * contraste.
 *
 * Fix: mismo patron de "igualar/superar especificidad" que ya se usa
 * en la seccion 31 para este mismo bloque - en hover, oscurece el
 * fondo (como el resto de los botones solidos del sitio, ver
 * ".block_make_submission_link:hover") y fuerza el texto blanco en
 * vez de dejar que la regla generica le gane. Los chips no activos no
 * necesitan este fix: ya tienen fondo claro, y el texto oscuro que les
 * pone la regla generica en hover contrasta bien contra ese fondo. */
.pkp_structure_sidebar .pkp_block.block_language .content li.current a:hover {
	background: var(--rl-color-primary-dark);
	color: #fff;
}

/* =====================================================================
 * 38. Menu principal (3er bloque del header): underline cortado, fondo
 *     negro al hacer click, e interacciones poco "vivas"
 * =====================================================================
 *
 * --- 38a. El underline animado del hover salia cortado (8px) ---
 * Causa: dos reglas ::after distintas caen sobre el mismo <a>:
 *   - la del TEMA BASE, que dibuja el triangulito de los submenus con
 *     el truco de borders: ".pkp_nav_list [aria-haspopup]:after"
 *     (width:0; height:0; border-top:4px solid; border-left/right:4px
 *     solid transparent). El atributo "aria-haspopup" no esta en el
 *     HTML servido por PHP - lo agrega JS al cargar la pagina en
 *     desktop (plugins/themes/default/js/main.js, linea 26,
 *     ".attr('aria-haspopup', true)" sobre los links con submenu de
 *     "#navigationPrimary, #navigationUser") - por eso no se ve
 *     mirando el HTML crudo, solo en el DOM ya renderizado.
 *   - la NUESTRA, que anima el subrayado: "...> li > a::after"
 *     (left:0; right:0; height:2px; background:primary).
 * Un elemento solo puede tener UN ::after: el navegador resuelve cada
 * propiedad por separado segun especificidad. La nuestra nunca declara
 * "width" ni "border", asi que esas propiedades caen sin oposicion a
 * los valores del tema (width:0 + bordes de 4px) - resultado: una
 * cajita de 8px en vez de un subrayado de ancho completo.
 * Como ya tenemos una flecha propia en ::before (la que rota al abrir
 * el submenu, mas arriba en este archivo), el ::after del tema queda
 * sobrando: se apaga del todo y ademas se blindan width/border en
 * nuestra regla por si algo mas se suma despues.
 *
 * --- 38b. Fondo casi negro al hacer click (menu, buscador, barra
 *     superior) ---
 * El tema base trae:
 *   .pkp_navigation_primary>li>a:focus { background: rgba(0,0,0,.84); ... }
 *   .pkp_navigation_search_wrapper a:focus { background: rgba(0,0,0,.84); ... }
 *   .pkp_navigation_user>li>a:focus { background: rgba(0,0,0,.84); ... }
 * (:focus se dispara tambien con click de mouse, no solo teclado). Ya
 * habia un intento de anularlo en este archivo (mas arriba, seccion 6)
 * pero: para el menu principal el selector del tema tiene un elemento
 * de mas (li+a vs. solo a) y ganaba igual; y para el buscador no
 * existia ningun intento - el div del buscador tiene su propia clase
 * (".pkp_navigation_search_wrapper", no ".pkp_navigation_primary_wrapper"),
 * asi que quedaba completamente sin cubrir. Se iguala el selector
 * completo para los 3 casos (menu, buscador, barra superior).
 *
 * --- 38c. Interaccion mas "viva" ---
 * El hover/foco del menu de escritorio quedaba en "transparent /
 * inherit" sin ningun cambio visible (seccion 6, para anular el fondo
 * negro) - se le suma un tinte + cambio de color al azul de marca para
 * que se note la interaccion sin volver a usar el negro del tema. El
 * buscador pasa de ser un link suelto a una pildora con fondo en
 * hover/foco y un pequeno "press" (scale) al hacer click, igual que
 * los demas botones del sitio. */

.pkp_navigation_primary_wrapper [aria-haspopup]::after {
	content: none;
}

.pkp_navigation_primary_wrapper .pkp_navigation_primary > li > a::after {
	width: auto;
	height: 2px;
	border: none;
}

.pkp_navigation_primary_wrapper .pkp_navigation_primary > li > a:focus,
.pkp_navigation_search_wrapper a:focus,
.pkp_navigation_user_wrapper .pkp_navigation_user > li > a:focus {
	background: transparent;
	color: inherit;
	outline: none;
}

.pkp_site_nav_menu .pkp_navigation_primary > li > a:hover,
.pkp_site_nav_menu .pkp_navigation_primary > li > a:focus {
	background: var(--rl-color-primary-tint-08);
	color: var(--rl-color-primary);
}

.pkp_navigation_search_wrapper .pkp_search {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.5em 0.9em;
	border-radius: 999px;
	transition: background-color var(--rl-transition-fast), color var(--rl-transition-fast), transform var(--rl-transition-fast);
}

.pkp_navigation_search_wrapper .pkp_search:hover,
.pkp_navigation_search_wrapper .pkp_search:focus-visible {
	background: var(--rl-color-primary-tint-08);
	color: var(--rl-color-primary);
}

.pkp_navigation_search_wrapper .pkp_search:active {
	transform: scale(0.94);
}

/* =====================================================================
 * 39a. "Inicio" con doble underline al hacer hover (solo esa opcion)
 * =====================================================================
 * Diagnostico: el tema base trae esta regla, pensada para des-resaltar
 * el borde de los items del menu que SI tienen submenu al pasar el
 * mouse (via el atributo "aria-haspopup" que JS agrega solo a esos -
 * ver seccion 38a):
 *
 *   .pkp_navigation_primary > li > a:hover {
 *     color: rgba(0,0,0,.84); outline:0; border-color: rgba(0,0,0,.84);
 *   }
 *   [aria-haspopup]:hover { border-color: transparent; }
 *
 * Todos los <a> del menu YA tienen un "border-bottom: 2px solid
 * transparent" reservado (para no saltar de tamano al cambiar de
 * estado). La primera regla, al hacer hover, cambia ese borde a un
 * negro semi-transparente MUY visible - pero la segunda regla lo
 * vuelve a poner en "transparent" para los que tienen dropdown
 * ("Acerca de", "Numeros", etc, via aria-haspopup).
 *
 * "Inicio" es el UNICO item del menu principal que NO tiene submenu
 * (nunca recibe aria-haspopup), asi que nunca recibe ese segundo
 * "border-color: transparent" - su borde se queda negro y visible al
 * hacer hover, dibujando una segunda linea justo debajo de nuestro
 * propio subrayado animado (::after, seccion 27). De ahi el "doble
 * underline, solo en esa opcion".
 *
 * Fix: neutralizar el borde en hover/foco para TODOS los items del
 * menu principal (no solo los que tienen dropdown), mismo selector
 * calificado que ya se usa en la seccion 38 para ganar por
 * especificidad. */
.pkp_navigation_primary_wrapper .pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary_wrapper .pkp_navigation_primary > li > a:focus {
	border-color: transparent;
}

/* =====================================================================
 * 39b. Hovers "toscos"/instantaneos en todo el sitio (tarjetas de
 *      articulos, enlaces, botones de formulario, etc.)
 * =====================================================================
 * Diagnostico: la regla "catch-all" de mas arriba (que suaviza el
 * hover de casi todo el sitio) estaba escrita con propiedades sueltas:
 *
 *   transition-property: color, background-color, border-color,
 *                         box-shadow, transform;
 *   transition-duration: var(--rl-transition-base);
 *   transition-timing-function: ease;
 *
 * "--rl-transition-base" NO es solo un tiempo, es "0.18s ease" (tiempo
 * + curva juntos, pensado para la forma corta "transition: propiedad
 * var(--rl-transition-base)"). Puesto dentro de "transition-duration"
 * a secas, "0.18s ease" es un valor invalido para esa propiedad (solo
 * acepta un tiempo) - el navegador lo descarta y usa el inicial "0s".
 * Resultado: TODOS los elementos de esa lista cambiaban de color/
 * fondo/sombra de forma instantanea, sin transicion real, aunque la
 * regla "existia" en el archivo.
 *
 * Fix: reescribir la misma regla con la propiedad corta "transition",
 * que si sabe repartir "0.18s" y "ease" en sus lugares. Mismo
 * selector, mismas propiedades y tiempo - ahora si se aplican. */
a,
.cmp_button,
.cmp_button_wire,
.obj_article_summary,
.obj_announcement_summary,
.pkp_block,
.obj_galley_link,
.obj_galley_link_supplementary,
.block_web_feed .content li a,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
select,
textarea {
	transition: color var(--rl-transition-base), background-color var(--rl-transition-base), border-color var(--rl-transition-base), box-shadow var(--rl-transition-base), transform var(--rl-transition-base);
}