/*
 * Visor JATS Studio - estilos base (MVP)
 * Objetivo: tipografía limpia, jerarquías claras, lectura cómoda.
 */
 
 .jatsstudio-article .jats-body p{
  text-align: justify;
}

/* ===== Fondo general (zona fuera del artículo) ===== */
html, body{
	background: #F4F2F1;
}

/* =========================
   AJUSTES RÁPIDOS (variables)
   ========================= */
:root{
  --jsv-head-bg: #141F3B;       /* fondo principal */
  --jsv-head-accent: #C3A87E;   /* línea inferior */
  --jsv-accent-h: 4px;          /* grosor línea */
  --jsv-accent-w: 40vw;         /* largo línea (40% del viewport) */

  --jsv-slab-bg: #FFFFFF;       /* rombo/placa del logo */
  --jsv-slab-max: 310px;        /* ANCHO de la placa */
  --jsv-logo-max: 300px;        /* máximo del logo */
  --jsv-slab-pad-y: 14px;       /* padding vertical placa */
  --jsv-slab-pad-x: 18px;       /* padding horizontal base */

  --jsv-logo-shift: 15px;       /* ✅ MUEVE EL LOGO A LA DERECHA (cambie SOLO este número) */

  /* Placa tipo “romboide” como su captura: izquierda recta, derecha diagonal */
  --jsv-slab-clip: polygon(0 0, 100% 0, 92% 100%, 0 100%);
}

/* =========================================================
   1) HEADER FULL-BLEED + BRILLO CENTRAL (NO TOCAR EL BRILLO)
   ========================================================= */

/* Tema por defecto OJS */
.pkp_structure_head{
  position: relative;
  z-index: 0;
  background: transparent !important;
}
.pkp_structure_head::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);

  /* Brillo central: EXACTAMENTE IGUAL que el suyo */
  background:
    radial-gradient(ellipse 85% 140% at 50% 35%,
      rgba(255,255,255,.14) 0%,
      rgba(255,255,255,0) 62%),
    var(--jsv-head-bg);

  z-index: -1;
}

/* HealthSciences */
header.main-header{
  position: relative;
  z-index: 0;
  background: transparent !important;
}
header.main-header::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);

  /* Brillo central: EXACTAMENTE IGUAL que el suyo */
  background:
    radial-gradient(ellipse 85% 140% at 50% 35%,
      rgba(255,255,255,.14) 0%,
      rgba(255,255,255,0) 62%),
    var(--jsv-head-bg);

  z-index: -1;
}

/* Links/texto del header sobre fondo oscuro */
.pkp_structure_head,
.pkp_structure_head a,
header.main-header,
header.main-header a{
  color: rgba(255,255,255,.95) !important;
}


/* para las citas textuales */
blockquote {
  margin: 1.75rem 0 1.75rem 2.5rem;
  padding-left: 1.25rem;
  border-left: 4px solid #444;
  color: #333;
}

blockquote p {
  margin: 0;
}


/* =========================================
   2) LÍNEA DORADA INFERIOR (hasta 40%)
   - En ::after y por encima de todo
   ========================================= */

/* Tema por defecto */
.pkp_structure_head::after{
  content:"";
  position:absolute;
  bottom: 0;
  left: calc(50% - 50vw); /* arranca en el borde real izquierdo (viewport) */
  width: var(--jsv-accent-w);
  height: var(--jsv-accent-h);
  background: var(--jsv-head-accent);
  z-index: 10;            /* encima del rombo blanco */
  pointer-events:none;
}

/* HealthSciences */
header.main-header::after{
  content:"";
  position:absolute;
  bottom: 0;
  left: calc(50% - 50vw);
  width: var(--jsv-accent-w);
  height: var(--jsv-accent-h);
  background: var(--jsv-head-accent);
  z-index: 10;
  pointer-events:none;
}

/* =========================================================
   3) PLACA ROMBOIDAL BLANCA DETRÁS DEL LOGO
   - La placa queda fija; el logo se corre con --jsv-logo-shift
   ========================================================= */

/* HealthSciences: <div class="navbar-logo"> */
header.main-header .navbar-logo{
  position: relative;
  left: calc(50% - 50vw);
  margin-left: 0 !important;
  padding-left: 0 !important;
  z-index: 2;

  display: inline-flex;
  align-items: center;

  /* ✅ La placa NO se mueve, pero el logo sí se “corre” hacia la derecha
     porque aumentamos SOLO el padding interno izquierdo */
  padding-top: var(--jsv-slab-pad-y) !important;
  padding-bottom: var(--jsv-slab-pad-y) !important;
  padding-right: var(--jsv-slab-pad-x) !important;
  padding-left: calc(var(--jsv-slab-pad-x) + var(--jsv-logo-shift)) !important;

  box-sizing: border-box;
  width: min(var(--jsv-slab-max), 92vw);

  isolation: isolate;
}

/* Tema por defecto OJS: <div class="pkp_site_name"> */
.pkp_structure_head .pkp_site_name{
  position: relative;
  left: calc(50% - 50vw);
  margin-left: 0 !important;
  padding-left: 0 !important;
  z-index: 2;

  display: inline-flex;
  align-items: center;

  /* ✅ Igual que arriba */
  padding-top: var(--jsv-slab-pad-y) !important;
  padding-bottom: var(--jsv-slab-pad-y) !important;
  padding-right: var(--jsv-slab-pad-x) !important;
  padding-left: calc(var(--jsv-slab-pad-x) + var(--jsv-logo-shift)) !important;

  box-sizing: border-box;
  width: min(var(--jsv-slab-max), 92vw);

  isolation: isolate;
}

/* Pseudo-elemento de la placa (romboide) */
header.main-header .navbar-logo::before,
.pkp_structure_head .pkp_site_name::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--jsv-slab-bg);
  clip-path: var(--jsv-slab-clip);
  z-index: 0;
  pointer-events:none;
}

/* El logo por encima de la placa */
header.main-header .navbar-logo img,
.pkp_structure_head .pkp_site_name img{
  display:block;
  position: relative;
  z-index: 1;

  max-width: min(var(--jsv-logo-max), 100%);
  width: auto;
  height: auto;
}

/* Si en algún caso aparece texto (sin imagen), que sea legible sobre blanco */
header.main-header .navbar-logo,
header.main-header .navbar-logo a,
.pkp_structure_head .pkp_site_name,
.pkp_structure_head .pkp_site_name a{
  color: #141F3B !important;
}






.jatsstudio-shell{
	max-width: 920px;
	margin: 0 auto;
	padding: 18px 16px 28px;
		background: #fff;

}

/* “Papel” blanco: sangra hasta el borde izquierdo real y +20px a la derecha */
.jatsstudio-shell{
	position: relative; /* necesario para el pseudo-elemento */
	z-index: 0;
	background: #fff;  /* tu estado normal */
}

/* Capa blanca detrás del shell, extendida (izq = viewport, der = +20px) */
.jatsstudio-shell::before{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;

	/* Mueve el inicio al borde izquierdo real del viewport */
	left: calc(50% - 50vw);

	/* Ancho = (lo que falta para llegar a la izquierda) + shell + 20px a la derecha */
	width: calc(50vw - 50% + 100% + 20px);

	background: #fff;
	z-index: -1;
}

/* Alto contraste: la “sangría” también se vuelve negra */
html.jats-contrast .jatsstudio-shell::before{
	background: #000 !important;
}



.jatsstudio-toolbar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid rgba(10,11,15,.12);
	border-radius: 12px;
	background: rgba(255,255,255,.85);
	backdrop-filter: blur(6px);
	margin-bottom: 18px;
}

/* =========================
   Toolbar: badges + crumbbar inline (una sola línea)
   ========================= */
.jatsstudio-toolbar{
	flex-wrap: nowrap;
}

.jatsstudio-toolbar__left{
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.jatsstudio-toolbar__right{
	flex: 0 0 auto;
}

/* Breadcrumb dentro de la toolbar: sin “caja” propia */
.jatsstudio-toolbar .jatsstudio-crumbbar{
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	backdrop-filter: none;
	border-radius: 0;
	gap: 6px;
	min-width: 0;
}

/* Evitar que el issue “rompa” la línea */
.jatsstudio-toolbar .jatsstudio-crumbbar__issue{
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 38ch;
}

/* Que los badges no se partan */
.jatsstudio-toolbar__left > .jatsstudio-badge{
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Íconos normalizados */
.jatsstudio-ico{
	width: 16px;
	height: 16px;
	object-fit: contain;
	display: inline-block;
	flex: 0 0 16px;
}


.jatsstudio-badge{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .2px;
	color: rgba(10,11,15,.78);
}

.jatsstudio-pdfSoon{
	font-size: 13px;
	color: rgba(10,11,15,.55);
	border: 1px dashed rgba(10,11,15,.28);
	padding: 6px 10px;
	border-radius: 999px;
}

/* PDF selector (modo 4: coexistencia) */
.jatsstudio-pdfmenu{
	position: relative;
	display: inline-block;
}
.jatsstudio-pdfmenu > summary{
	list-style: none;
	cursor: pointer;
}
.jatsstudio-pdfmenu > summary::-webkit-details-marker{
	display: none;
}
.jatsstudio-pdfmenu__panel{
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	min-width: 210px;
	background: #fff;
	border: 1px solid rgba(10,11,15,.14);
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0,0,0,.12);
	padding: 6px;
	z-index: 50;
}
.jatsstudio-pdfmenu__item{
	display: block;
	padding: 8px 10px;
	border-radius: 10px;
	text-decoration: none;
	color: rgba(10,11,15,.88);
	font-size: 13px;
	font-weight: 600;
}
.jatsstudio-pdfmenu__item:hover{
	background: rgba(10,11,15,.06);
}


.jatsstudio-error{
	border: 1px solid rgba(180, 40, 40, .22);
	background: rgba(180, 40, 40, .06);
	padding: 12px 14px;
	border-radius: 12px;
	color: rgba(10,11,15,.85);
	line-height: 1.6;
}

.jatsstudio-article{
	font-size: 16px;
	line-height: 1.75;
	color: rgba(10,11,15,.88);
}

.jatsstudio-article h1{
	font-size: 30px;
	line-height: 1.18;
	letter-spacing: -.3px;
	margin: 6px 0 10px;
	text-align: left;
}

/* =========================
   TOC (Menú lateral fijo)
   ========================= */
.jatsstudio-article .jats-toc{
	position: fixed;

	/* pegado al borde izquierdo REAL */
	left: 0;

	/* límites dinámicos (JS los calcula según header/footer) */
	top: var(--jats-toc-top, 25vh);
	bottom: var(--jats-toc-bottom, 0);

	/* ancho dinámico: desde borde izquierdo hasta el inicio del contenedor */
	width: var(--jats-toc-width, 100px);
	max-width: none;

	overflow-y: auto;
	-webkit-overflow-scrolling: touch;

	padding: 10px 10px;
	box-sizing: border-box;

	border-radius: 14px;
	border: 1px solid rgba(10,11,15,.12);
		background: #F5F6F9;

		backdrop-filter: none;


	box-shadow: 0 10px 30px rgba(10,11,15,.08);
	z-index: 40;
}


.jatsstudio-article .jats-toc-title{
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .2px;
	color: rgba(10,11,15,.72);
	margin: 2px 4px 8px;
}

.jatsstudio-article .jats-toc-list,
.jatsstudio-article .jats-toc-sublist{
	list-style: none;
	padding: 0;
	margin: 0;
}

.jatsstudio-article .jats-toc-item{
	margin: 0;
}

.jatsstudio-article .jats-toc-sublist{
	margin: 6px 0 6px 10px;
	padding-left: 10px;
	border-left: 1px solid rgba(10,11,15,.14);
}

.jatsstudio-article a.jats-toc-link{
	display: block;
	padding: 6px 8px;
	border-radius: 12px;
	text-decoration: none; /* no subrayado en el menú */
	color: rgba(10,11,15,.78);
	font-size: 12.5px;
	line-height: 1.35;
}
/* Sub-secciones (nivel >=2): fondo diferenciado */
.jatsstudio-article a.jats-toc-link[data-level="2"],
.jatsstudio-article a.jats-toc-link[data-level="3"],
.jatsstudio-article a.jats-toc-link[data-level="4"]{
	background: #EBF0F5;
}


.jatsstudio-article a.jats-toc-link:hover{
		background: #E3E9F1;

}

.jatsstudio-article a.jats-toc-link.is-active{
		background: #DEE4EE;
	color: rgba(10,11,15,.90);
	font-weight: 700;
}

/* Indentación fina por nivel (data-level) */
.jatsstudio-article a.jats-toc-link[data-level="1"]{ }
.jatsstudio-article a.jats-toc-link[data-level="2"]{ font-size: 12px; }
.jatsstudio-article a.jats-toc-link[data-level="3"]{ font-size: 12px; }
.jatsstudio-article a.jats-toc-link[data-level="4"]{ font-size: 12px; }

/* Ocultar el menú cuando la ventana es estrecha (para no tapar el artículo) */
@media (max-width: 1200px){
	.jatsstudio-article .jats-toc{ display: none; }
}

/* Mejora: al ir con anchor, evita que el objetivo quede "tapado" por headers */
.jatsstudio-article .jats-sec,
.jatsstudio-article .jats-subsec,
.jatsstudio-article #jats-ack,
.jatsstudio-article #jats-notes,
.jatsstudio-article #jats-references,
.jatsstudio-article #jats-declarations,
.jatsstudio-article #jats-biodata,
.jatsstudio-article .jats-fn[id],
.jatsstudio-article .jats-ref[id]{
	scroll-margin-top: calc(var(--jats-header-offset, 120px) + 16px);
}



/* =========================
   Meta y contenido
   ========================= */

/* Títulos traducidos (uno por línea) */
.jatsstudio-article .jats-trans-titles{
	margin: 0 0 10px;
	color: rgba(10,11,15,.72);
	font-size: 15px;
	line-height: 1.45;
}
.jatsstudio-article .jats-trans-title{ margin: 0 0 2px; }

.jatsstudio-article .jats-meta{
	font-size: 13px;
	line-height: 1.6;
	color: rgba(10,11,15,.65);
	margin: 0 0 18px;
}

/* Autores */
.jatsstudio-article .jats-authors{
	text-align: justify;
	margin: 0 0 8px;
}
.jatsstudio-article .jats-author{ display: inline; }
.jatsstudio-article .jats-author-name{ white-space: nowrap; }
.jatsstudio-article sup.jats-author-letter,
.jatsstudio-article sup.jats-author-aff{ font-size: 10px; }

/* Afiliaciones */
.jatsstudio-article .jats-affiliations{
	text-align: justify;
	margin: 0 0 10px;
}
.jatsstudio-article .jats-aff{ display: inline; }
.jatsstudio-article .jats-aff-num{ font-weight: 600; }

/* Correo + ORCID */
.jatsstudio-article .jats-author-ids{ margin: 0 0 12px; }
.jatsstudio-article .jats-author-idline{
	text-align: justify;
	margin: 0 0 4px;
}
.jatsstudio-article .jats-author-letter-inline{ font-weight: 600; }
.jatsstudio-article .jats-orcid{ white-space: nowrap; }
.jatsstudio-article .jats-orcid-logo{
	width: 14px;
	height: 14px;
	vertical-align: -2px;
	margin-right: 4px;
}

/* Línea de revista / editorial / historial */
.jatsstudio-article .jats-journalline,
.jatsstudio-article .jats-publisherline,
.jatsstudio-article .jats-historyline{ margin: 0 0 6px; }
.jatsstudio-article .jats-journal-title{ font-weight: 600; }

/* Identificadores */
.jatsstudio-article .jats-ids{ margin: 8px 0 10px; }
.jatsstudio-article .jats-idline{ margin: 0 0 4px; }
.jatsstudio-article .jats-idlogo{
	width: 16px;
	height: 16px;
	vertical-align: -3px;
	margin-right: 6px;
}
.jatsstudio-article .jats-idlabel{
	font-weight: 700;
	letter-spacing: .2px;
	margin-right: 6px;
}

/* Derechos + licencia */
.jatsstudio-article .jats-copyright{ margin: 8px 0 8px; }
.jatsstudio-article .jats-license-img{
	width: 88px;
	height: 31px;
	vertical-align: middle;
}


/* Abstracts (plegables) */
.jatsstudio-article .jats-abstracts{
	border-left: 3px solid rgba(10,11,15,.22);
	padding: 10px 14px;
	border-radius: 10px;
	background: rgba(10,11,15,.03);
	margin: 16px 0 22px;
}

/* En el XSL ahora cada abstract debe ser <details class="jats-abstract-block"> */
.jatsstudio-article details.jats-abstract-block{
	margin: 0 0 14px;
}

/* El título visible (click) */
.jatsstudio-article details.jats-abstract-block > summary.jats-abstract-title{
	cursor: pointer;
	list-style: none;
	margin: 0;
}

/* Quita el marker por defecto */
.jatsstudio-article details.jats-abstract-block > summary::-webkit-details-marker{
	display: none;
}

/* Separación cuando está abierto */
.jatsstudio-article details.jats-abstract-block[open] > summary.jats-abstract-title{
	margin-bottom: 8px;
}

/* Cuerpo del abstract justificado */
.jatsstudio-article .jats-abstract-body,
.jatsstudio-article .jats-abstract-body p{
	text-align: justify;
}

/* Keywords bajo el abstract (cuando se despliega) */
.jatsstudio-article .jats-kwd{ margin: 8px 0 0; }


.jatsstudio-article h2{
	font-size: 20px;
	margin: 26px 0 10px;
}
.jatsstudio-article h3{
	font-size: 17px;
	margin: 20px 0 8px;
}

/* === Reglas editoriales para títulos de secciones === */

/* Secciones principales: MAYÚSCULAS + negrita + centrado + 72pt antes */
.jatsstudio-article .jats-sec > h2,
.jatsstudio-article #jats-ack > h2,
.jatsstudio-article #jats-notes > h2,
.jatsstudio-article #jats-references > h2,
.jatsstudio-article #jats-declarations > h2,
.jatsstudio-article #jats-biodata > h2{
	font-weight: 800;
	text-transform: uppercase;
	text-align: center;
	margin-top: 72pt;
	margin-bottom: 10pt;
}

/* Secciones dentro de secciones: NO forzar mayúsculas; sí negrita+centrado; 10pt antes */
.jatsstudio-article .jats-subsec > h3,
.jatsstudio-article #jats-declarations h3{
	font-weight: 800;
	text-transform: none;
	text-align: center;
	margin-top: 20pt;
	margin-bottom: 8pt;
}


.jatsstudio-article p{ margin: 0 0 14px; }
.jatsstudio-article a{ text-decoration: underline; }

/* Listas */
.jatsstudio-article ul,
.jatsstudio-article ol{
	padding-left: 22px;
	margin: 10px 0 14px;
}
.jatsstudio-article ol.jats-list-alpha-lower{ list-style-type: lower-alpha; }
.jatsstudio-article ol.jats-list-alpha-upper{ list-style-type: upper-alpha; }
.jatsstudio-article ol.jats-list-roman-lower{ list-style-type: lower-roman; }
.jatsstudio-article ol.jats-list-roman-upper{ list-style-type: upper-roman; }

/* Figuras */
.jatsstudio-article figure,
.jatsstudio-article figure.jats-fig{
	margin: 18px 0;
	text-align: center;
}

.jatsstudio-article figure img,
.jatsstudio-article figure.jats-fig img{
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.jatsstudio-article .jats-fig-label,
.jatsstudio-article .jats-fig-caption,
.jatsstudio-article .jats-fig-foot,
.jatsstudio-article .jats-fig-attrib{
	text-align: center;
}

.jatsstudio-article figcaption{
	font-size: 0.92em;
	margin-top: 6px;
	color: #333;
}



/* TABLAS */
.jatsstudio-article .jats-table-wrap{ margin: 18px 0; }

/* Centrar “lo editorial” (título, fuente, notas), NO el contenido de celdas */
.jatsstudio-article .jats-table-label,
.jatsstudio-article .jats-table-caption-title,
.jatsstudio-article .jats-table-foot,
.jatsstudio-article .jats-table-attrib{
	text-align: center;
}

.jatsstudio-article .jats-table-label{
	font-weight: 700;
	font-size: 13px;
	margin: 0 0 6px;
	color: rgba(10,11,15,.78);
}
.jatsstudio-article .jats-table-caption-title{ margin: 0 0 8px; }
.jatsstudio-article .jats-table-attrib{
	margin-top: 10px;
	font-size: 13px;
	color: rgba(10,11,15,.62);
}

/* Scroll horizontal si hace falta */
.jatsstudio-article .jats-table-scroll{
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Tabla centrada si es más angosta, sin forzar centrado interno */
.jatsstudio-article table.jats-table{
	width: auto;
	max-width: 100%;
	margin: 0 auto;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.55;
}

.jatsstudio-article table.jats-table th,
.jatsstudio-article table.jats-table td{
	border: 1px solid rgba(10,11,15,.18);
	padding: 8px 10px;
	vertical-align: top;
}

.jatsstudio-article table.jats-table th{ font-weight: 700; }
.jatsstudio-article table.jats-table p{ margin: 0; }


/* Inline images */
.jatsstudio-article img.jats-inline-graphic{
	display: inline-block;
	max-height: 1.1em;
	width: auto;
	vertical-align: -0.15em;
	margin: 0 2px;
}
.jatsstudio-article img.jats-graphic{
	max-width: 100%;
	height: auto;
	display: block;
	margin: 10px auto;
}

/* Referencias */
.jatsstudio-article .jats-ref-list{
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid rgba(10,11,15,.12);
}
.jatsstudio-article .jats-ref{
	font-size: 14px;
	line-height: 1.65;
	margin: 0 0 10px;
}

@media (max-width: 560px){
	.jatsstudio-shell{ padding: 12px 12px 22px; }
	.jatsstudio-article{ font-size: 15px; }
	.jatsstudio-article h1{ font-size: 26px; }
}


/* =========================
   Zoom de imágenes (clic -> pantalla completa + pie)
   ========================= */

/* Cursor “zoom” solo para imágenes “grandes” (fig/graphic), no para iconos */
.jatsstudio-article figure img,
.jatsstudio-article img.jats-graphic{
	cursor: zoom-in;
}

/* =========================
   QR modal (overlay 30% + panel centrado)
   ========================= */

.jats-qr-modal{
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(0,0,0,.30); /* negro 30% */
	z-index: 9999;
}

.jats-qr-modal.is-open{ display: flex; }

.jats-qr-panel{
	width: min(900px, 96vw);
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 20px 60px rgba(0,0,0,.25);
	padding: 16px 16px 14px;
	position: relative;
	box-sizing: border-box;
}

.jats-qr-close{
	position: absolute;
	top: 8px;
	right: 10px;
	border: 0;
	background: transparent;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	padding: 2px 6px;
}

.jats-qr-grid{
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 18px;
	align-items: center;
}

.jats-qrbox{
	position: relative;
	width: 300px;
	height: 300px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	box-sizing: border-box;
	border-radius: 14px;
	border: 1px dashed rgba(10,11,15,.22);
}

.jats-qr-code canvas,
.jats-qr-code img{
	width: 100% !important;
	height: 100% !important;
	display: block;
}

.jats-qr-logo{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 58px;
	height: 58px;
	border-radius: 12px;
	background: #fff;
	padding: 6px;
	box-sizing: border-box;
	box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

.jats-qr-id{ font-weight: 700; margin: 0 0 4px; }
.jats-qr-url{ opacity: .85; margin: 0 0 10px; word-break: break-all; }

.jats-qr-note{ opacity: .8; margin: 0 0 10px; }

.jats-qr-input{
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid rgba(10,11,15,.18);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.jats-qr-actions{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}

/* Responsive */
@media (max-width: 740px){
	.jats-qr-grid{ grid-template-columns: 1fr; }
	.jats-qrbox{ width: 280px; height: 280px; }
}


/* Modal/overlay */
.jats-img-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.40); /* negro con 40% transparencia */
  z-index: 9999;
}

.jats-img-modal.is-open{
  display: flex;
}

/* Panel centrado (imagen + pie) */
.jats-img-modal__panel{
  width: 96vw;               /* ✅ ahora el panel tiene ancho real */
  height: 96vh;              /* ✅ ahora el panel tiene alto real */

  max-width: 96vw;
  max-height: 96vh;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  min-height: 0;             /* ✅ clave para que flex permita que la imagen crezca */
}

/* Imagen (crece al máximo sin deformarse) */
.jats-img-modal__img{
  flex: 1 1 auto;            /* ✅ ocupa todo el espacio disponible del panel */
  width: 100%;               /* ✅ se estira al ancho disponible */
  height: 100%;              /* ✅ se estira al alto disponible */
  object-fit: contain;       /* ✅ mantiene proporciones y maximiza tamaño */
  display: block;

  max-width: 96vw;
  max-height: calc(96vh - 70px); /* deja espacio para el pie */

  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  cursor: zoom-out;
}

/* Pie/caption */
.jats-img-modal__caption{
  width: 100%; /* fuerza el ancho */
  max-width: 100vw;
  box-sizing: border-box;

  color: rgba(255,255,255,.92);
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  padding: 10px 16px;
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
  overflow: auto;
}

.jats-img-modal__caption a{
  color: rgba(255,255,255,.95);
  text-decoration: underline;
}

/* Bloquea el scroll del documento cuando el modal está abierto */
body.jats-modal-open{ overflow: hidden; }

@media (max-width: 560px){
  .jats-img-modal{ padding: 12px; }

  .jats-img-modal__panel{
    width: 98vw;            /* ✅ también ancho real en móvil */
    height: 92vh;           /* ✅ también alto real en móvil */
    max-width: 98vw;
    max-height: 92vh;
  }

  .jats-img-modal__img{
    max-width: 98vw;
    max-height: calc(92vh - 80px);
  }

  .jats-img-modal__caption{ font-size: 13px; }
}



/* =========================
   TTS Player (pegajoso a la derecha)
   ========================= */

.sr-only{
	position:absolute !important;
	width:1px !important;
	height:1px !important;
	padding:0 !important;
	margin:-1px !important;
	overflow:hidden !important;
	clip:rect(0,0,0,0) !important;
	white-space:nowrap !important;
	border:0 !important;
}

/* TTS con "cajita" interna, pero controlado por la tarjeta */
.jats-tts-player{
	position: static;
	transform: none;

	width: 100%;
	max-width: none;

	border-radius: 14px;
	border: 1px solid rgba(10,11,15,.12);
	background: rgba(255,255,255,.65);

	box-shadow: 0 10px 24px rgba(10,11,15,.08);

	padding: 10px 10px 8px;
	color: rgba(10,11,15,.86);
}


.jats-tts-player__top{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.jats-tts-player__badge{
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .2px;
	color: rgba(10,11,15,.70);
}

.jats-tts-player__progress{
	font-size: 12px;
	font-weight: 700;
	color: rgba(10,11,15,.62);
}

.jats-tts-player__controls{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-bottom: 10px;
}

.jats-tts-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 40px;

	border-radius: 12px;
	border: 1px solid rgba(10,11,15,.12);
	background: rgba(255,255,255,.95);

	box-shadow: 0 8px 20px rgba(10,11,15,.06);
	cursor: pointer;
	transition: transform .08s ease, background .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.jats-tts-btn:hover{
	background: rgba(10,11,15,.03);
}

.jats-tts-btn:active{
	transform: translateY(1px);
	box-shadow: 0 6px 16px rgba(10,11,15,.06);
}

.jats-tts-btn[disabled]{
	opacity: .55;
	cursor: not-allowed;
	box-shadow: none;
}

.jats-tts-btn svg{
	width: 18px;
	height: 18px;
	fill: rgba(10,11,15,.78);
}

/* Toggle icon play/pause según estado */
.jats-tts-ico{ display: inline-flex; }
.jats-tts-player.is-speaking .jats-tts-ico--play{ display: none; }
.jats-tts-player.is-idle .jats-tts-ico--pause{ display: none; }
.jats-tts-player.is-paused .jats-tts-ico--pause{ display: none; }

.jats-tts-player__settings{
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.jats-tts-field{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: rgba(10,11,15,.70);
}

.jats-tts-label{
	font-weight: 800;
	letter-spacing: .15px;
}

.jats-tts-player select{
	font-size: 12px;
	padding: 6px 8px;
	border-radius: 10px;
	border: 1px solid rgba(10,11,15,.14);
	background: rgba(255,255,255,.95);
	color: rgba(10,11,15,.82);
}

.jats-tts-player select[disabled]{
	opacity: .6;
	cursor: not-allowed;
}

.jats-tts-player__now{
	font-size: 12.5px;
	line-height: 1.35;
	color: rgba(10,11,15,.62);
	padding-top: 8px;
	border-top: 1px solid rgba(10,11,15,.10);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

/* Highlight del bloque leído */
.jatsstudio-article .jats-tts-active{
	outline: 2px solid rgba(10,11,15,.16);
	background: rgba(10,11,15,.04);
	border-radius: 10px;
	padding-left: 8px;
	padding-right: 8px;
}

/* Subrayado grueso de la palabra actual (TTS) */
:root{
  --jats-tts-amber: rgba(245,168,35,.95);
  --jats-tts-amber-shadow: rgba(245,168,35,.30);
}
html.jats-contrast{
  --jats-tts-amber: rgba(255,204,0,1);
  --jats-tts-amber-shadow: rgba(255,204,0,.55);
}

/* OJO: inline-block es clave para que el ::after funcione bien en Firefox */
.jatsstudio-article .jats-tts-word{
  position: relative;
  display: inline-block;
  z-index: 0;
}

.jatsstudio-article .jats-tts-word.is-current::after{
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  height: 0.26em;      /* grosor */
  bottom: -0.10em;     /* “justo debajo” */
  background: var(--jats-tts-amber);
  border-radius: 999px;
 
  pointer-events: none;
}


/* ===========================
   JATS Studio — TTS word underline (amber)
   Subraya la palabra exacta que se está leyendo (cuando el JS la marca)
   =========================== */

:root{
  /* Color ámbar del subrayado (ajústalo si quieres) */
  --jats-tts-amber: #f4b000;
  /* Sombra suave para que se vea sobre fondos claros */
  --jats-tts-amber-shadow: rgba(244,176,0,0.35);
  /* Grosor del subrayado (escala con el tamaño de letra) */
  --jats-tts-underline: 0.35em;
  /* Distancia entre texto y subrayado */
  --jats-tts-offset: 0.14em;
}

.jats-tts-word{
  /* asegura que el subrayado se vea consistente */
  text-decoration: none;
}

.jats-tts-word.is-spoken{
  /* Subrayado “grueso” estilo marcador debajo de la palabra */
  text-decoration-line: underline;
  text-decoration-thickness: var(--jats-tts-underline);
  text-decoration-color: var(--jats-tts-amber);
  text-underline-offset: var(--jats-tts-offset);

  /* Un poquito de glow para mejorar legibilidad */
  box-shadow: inset 0 -0.08em 0 var(--jats-tts-amber-shadow);
}

/* En modo alto contraste, refuerza el color */
html.jats-contrast .jats-tts-word.is-spoken{
  text-decoration-color: var(--jats-tts-amber);
  box-shadow: inset 0 -0.10em 0 rgba(244,176,0,0.55);
}




/* Ocultar el player en pantallas estrechas para no tapar lectura */
@media (max-width: 1200px){
	.jats-tts-player{ display: none; }
}


/* =========================
   A11y: variables + botones + alto contraste + escala tipográfica
   ========================= */

/* 1) Variable global de escala (JS la modifica) */
:root{
	--jats-font-scale: 1;
}

/* 2) Botón base (también deja bonito el botón PDF si usa .jatsstudio-btn) */
.jatsstudio-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 10px;
	border-radius: 999px;
	border: 1px solid rgba(10,11,15,.14);
	background: rgba(255,255,255,.88);
	color: rgba(10,11,15,.86);
	font-size: 13px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	user-select: none;
}
.jatsstudio-btn:hover{ background: rgba(255,255,255,.96); }
.jatsstudio-btn:active{ transform: translateY(1px); }

/* Grupo de accesibilidad en la toolbar */
.jatsstudio-a11y{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-right: 10px;
}

/* Estado “on” (contraste activado) */
.jatsstudio-btn.is-on{
	border-color: rgba(10,11,15,.30);
	font-weight: 700;
}

/* 3) Escala tipográfica (ajusta lo principal sin reescribir todo el CSS) */
.jatsstudio-article{
	font-size: calc(16px * var(--jats-font-scale));
}

/* Títulos y textos importantes (para que también escalen) */
.jatsstudio-article h1{ font-size: calc(30px * var(--jats-font-scale)); }
.jatsstudio-article h2{ font-size: calc(20px * var(--jats-font-scale)); }
.jatsstudio-article h3{ font-size: calc(17px * var(--jats-font-scale)); }

.jatsstudio-article .jats-meta{ font-size: calc(13px * var(--jats-font-scale)); }
.jatsstudio-article .jats-trans-titles{ font-size: calc(15px * var(--jats-font-scale)); }
.jatsstudio-article .jats-ref{ font-size: calc(14px * var(--jats-font-scale)); }

/* TOC también escala (opcional, pero coherente para baja visión) */
.jatsstudio-article .jats-toc-title{ font-size: calc(12px * var(--jats-font-scale)); }
.jatsstudio-article a.jats-toc-link{ font-size: calc(12.5px * var(--jats-font-scale)); }

/* 4) Alto contraste: fondo negro + letras blancas (alcance: toda la página) */
html.jats-contrast,
html.jats-contrast body{
	background: #000 !important;
	color: #fff !important;
}

/* Contenedores del visor */
html.jats-contrast .jatsstudio-shell,
html.jats-contrast .jatsstudio-article{
	background: #000 !important;
	color: rgba(255,255,255,.92) !important;
}

/* Alto contraste: forzar texto meta en blanco (lo que suele quedar gris por estilos propios) */
html.jats-contrast .jatsstudio-article .jats-copyright,
html.jats-contrast .jatsstudio-article .jats-historyline,
html.jats-contrast .jatsstudio-article .jats-historyline *,
html.jats-contrast .jatsstudio-article .jats-author-letter-inline,
html.jats-contrast .jatsstudio-article .jats-aff-num,
html.jats-contrast .jatsstudio-article .jats-aff-org,
html.jats-contrast .jatsstudio-article sup.jats-author-aff,
html.jats-contrast .jatsstudio-article sup.jats-author-letter,
html.jats-contrast .jatsstudio-article .jats-author-name,
html.jats-contrast .jatsstudio-article .jats-trans-titles,
html.jats-contrast .jatsstudio-article .jats-trans-titles *{
	color: #fff !important;
	opacity: 1 !important;
}

/* (10) Buenas prácticas (BP): quitar fondos de los items para que se vea el negro */
html.jats-contrast .jats-intstats-card.jats-intstats-card--bp .jats-bp-item,
html.jats-contrast .jats-intstats-card--bp .jats-bp-item{
	background: transparent !important;
	border-top-color: rgba(255,255,255,.22) !important;
}

/* Si esos BP items están “version dashboard” (mini-cards), también quita fondo + bordes claros */
html.jats-contrast .jats-best-practices .jats-bp-item{
	background: transparent !important;
	border-color: rgba(255,255,255,.22) !important;
}





/* Toolbar y “cards” */
html.jats-contrast .jatsstudio-toolbar{
	background: rgba(0,0,0,.92) !important;
	border-color: rgba(255,255,255,.22) !important;
}
html.jats-contrast .jatsstudio-error{
	background: rgba(255,255,255,.06) !important;
	border-color: rgba(255,255,255,.25) !important;
}

/* Menú TOC */
html.jats-contrast .jatsstudio-article .jats-toc{
	background: rgba(0,0,0,.92) !important;
	border-color: rgba(255,255,255,.22) !important;
}
html.jats-contrast .jatsstudio-article a.jats-toc-link{
	color: rgba(255,255,255,.92) !important;
}
html.jats-contrast .jatsstudio-article a.jats-toc-link:hover{
	background: rgba(255,255,255,.10) !important;
}
html.jats-contrast .jatsstudio-article a.jats-toc-link.is-active{
	background: rgba(255,255,255,.16) !important;
	color: #fff !important;
}

/* Enlaces del artículo */
html.jats-contrast .jatsstudio-article a{
	color: #fff !important;
	text-decoration: underline !important;
}

/* Figuras y tablas */
html.jats-contrast .jatsstudio-article figure{
	background: rgba(255,255,255,.06) !important;
	border-color: rgba(255,255,255,.20) !important;
}
html.jats-contrast .jatsstudio-article table.jats-table th,
html.jats-contrast .jatsstudio-article table.jats-table td{
	border-color: rgba(255,255,255,.22) !important;
}

/* Abstracts */
html.jats-contrast .jatsstudio-article .jats-abstracts{
	background: rgba(255,255,255,.06) !important;
	border-left-color: rgba(255,255,255,.25) !important;
}

/* Botones en contraste */
html.jats-contrast .jatsstudio-btn{
	background: rgba(0,0,0,.92) !important;
	border-color: rgba(255,255,255,.25) !important;
	color: rgba(255,255,255,.92) !important;
}
html.jats-contrast .jatsstudio-btn:hover{
	background: rgba(255,255,255,.10) !important;
}



/* =========================
   Tarjeta Accesibilidad (derecha, pantalla real)
   ========================= */
.jats-a11y-card{
	position: fixed;
	right: 12px;
		top: var(--jats-a11y-top, 0px);   /* dinámico (JS) */
	transform: translateY(var(--jats-a11y-shift, 0px));
	will-change: transform, top;

	width: 250px;           /* ajusta aquí si la quieres más ancha */
	max-width: calc(100vw - 24px);
	z-index: 9998;

	padding: 12px;
	border-radius: 16px;
	border: 1px solid rgba(10,11,15,.12);
	background: rgba(255,255,255,.90);
	backdrop-filter: blur(10px);
	box-shadow: 0 10px 30px rgba(10,11,15,.10);
}

.jats-a11y-card__title{
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .2px;
	color: rgba(10,11,15,.72);
	margin: 2px 2px 10px;
}

.jats-a11y-controls{
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

.jats-a11y-card__divider{
	height: 1px;
	background: rgba(10,11,15,.10);
	margin: 12px 0;
}


.jats-a11y-card .jats-tts-player{
	position: static !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;

	width: 100% !important;
	max-width: none !important;

	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Si quieres que en pantallas estrechas no moleste */
@media (max-width: 1200px){
	.jats-a11y-card{ display: none; }
}



/* =========================
   Breadcrumb / Issue link
   ========================= */
.jatsstudio-crumbbar{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	margin: 0 0 12px;
	border: 1px solid rgba(10,11,15,.10);
	border-radius: 12px;
	background: rgba(255,255,255,.70);
	backdrop-filter: blur(6px);
	color: rgba(10,11,15,.68);
	font-size: 13px;
}

.jatsstudio-crumbbar__issue{
	text-decoration: none;
	font-weight: 650;
	color: rgba(10,11,15,.78);
}

.jatsstudio-crumbbar__issue:hover{
	text-decoration: underline;
}

.jatsstudio-crumbbar__sep{
	color: rgba(10,11,15,.35);
}

.jatsstudio-crumbbar__loc{
	white-space: nowrap;
	color: rgba(10,11,15,.60);
}

/* =========================
   Toolbar buttons grouping
   ========================= */
.jatsstudio-btngroup{
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.jatsstudio-btn{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 999px;
	border: 1px solid rgba(10,11,15,.14);
	background: rgba(255,255,255,.92);
	color: rgba(10,11,15,.85);
	font-size: 13px;
	font-weight: 650;
	text-decoration: none;
}

.jatsstudio-btn:hover{
	background: rgba(10,11,15,.04);
}

.jatsstudio-btn--secondary{
	background: rgba(255,255,255,.65);
}

/* =========================
   Citation block (right card)
   ========================= */
.jats-cite__title{
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .2px;
	color: rgba(10,11,15,.72);
	margin: 2px 2px 10px;
}

.jats-cite__tabs{
	display: flex;
	gap: 8px;
	margin-bottom: 10px;
}

.jats-cite__tab{
	border: 1px solid rgba(10,11,15,.14);
	background: rgba(255,255,255,.85);
	border-radius: 10px;
	padding: 6px 10px;
	font-size: 12px;
	font-weight: 700;
	color: rgba(10,11,15,.75);
	cursor: pointer;
}

.jats-cite__tab.is-active{
	background: rgba(10,11,15,.06);
	color: rgba(10,11,15,.88);
}

.jats-cite__placeholder{
	font-size: 12px;
	color: rgba(10,11,15,.55);
	margin: 0 0 8px;
}

.jats-cite__output{
	margin: 0;
	white-space: pre-wrap;
	word-break: break-word;
	font-size: 12.5px;
	line-height: 1.45;
	padding: 10px 10px;
	border-radius: 12px;
	border: 1px solid rgba(10,11,15,.10);
	background: rgba(255,255,255,.70);
}



/* ===========================
   JATS Studio — ajustes de meta
   =========================== */

/* Títulos traducidos: negrita y un poco más grandes (sin exagerar) */
.jats-trans-titles .jats-trans-title{
 
  font-size: 1.12em; /* “dos puntos” aprox sin romper el layout */
  line-height: 1.25;
}

/* Espacio entre el último título traducido y autores (equivalente a un <br>) */
.jats-trans-titles{
  margin-bottom: 2rem !important;
}

/* (Opcional) si quieres que el bloque “journal/publisher” se vea como cabecera editorial */
.jats-journalblock{
  margin: 0 0 0.75rem 0;
  font-size: 0.98em;
  opacity: 0.95;
}

/* ✅ CORRECCIÓN: evita que el journal/publisher herede el tamaño del título traducido */
.jats-journalblock .jats-journalline,
.jats-journalblock .jats-publisherline{
  font-weight: 400;
  font-size: 0.82em; /* más chico que los títulos traducidos */
  line-height: 1.25;
  opacity: 1; /* que no quede “lavado” si quieres legibilidad */
}

/* (Opcional) que el nombre de la revista destaque un poco sin parecer título */
.jats-journalblock .jats-journal-title{
  font-weight: 600;
}


/* ===== Notas: número y contenido en la misma línea (override) ===== */
.jatsstudio-article #jats-notes .jats-fn{
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 10px !important;
	margin: 0 0 10px !important;
}

.jatsstudio-article #jats-notes .jats-fn-label{
	flex: 0 0 auto !important;
	white-space: nowrap !important;
	font-weight: 700 !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.55 !important;
}

/* El contenido se pega a la derecha del número */
.jatsstudio-article #jats-notes .jats-fn-content{
	flex: 1 1 auto !important;
	min-width: 0 !important;
	display: block !important;
}

/* CLAVE: evita que el primer <p> “baje” y parezca otra línea */
.jatsstudio-article #jats-notes .jats-fn-content > p{
	margin: 0 !important;
}
.jatsstudio-article #jats-notes .jats-fn-content > p:first-child{
	display: inline !important;
}

/* Si hay más párrafos, que sí bajen con un espacio razonable */
.jatsstudio-article #jats-notes .jats-fn-content > p + p{
	display: block !important;
	margin-top: 6px !important;
}
/* ===========================
   AJUSTES SOLICITADOS (meta)
   =========================== */

/* 1) Título principal: más aire arriba y un poco abajo */
.jatsstudio-article h1.jats-article-title{
  margin-top: 20px !important;
  margin-bottom: 14px !important;
  line-height: 1.15 !important;
}

/* 2) Títulos traducidos: más aire (sin centrar) */
.jatsstudio-article .jats-trans-titles{
  margin-top: 10px !important;
  margin-bottom: 18px !important;
}
.jatsstudio-article .jats-trans-titles .jats-trans-title{
  line-height: 1.35 !important;
}

/* 3) Autores: separación limpia */
.jatsstudio-article .jats-authors{
  margin-top: 18px !important;
  margin-bottom: 8px !important;
}
.jatsstudio-article .jats-author-name{
  font-size: 14px !important;
}

/* 4) Afiliaciones: aire y lectura */
.jatsstudio-article .jats-affiliations{
  margin-top: 6px !important;
  margin-bottom: 10px !important;
}

/* 5) Correo + ORCID: evitar justify y separar líneas */
.jatsstudio-article .jats-author-ids{
  margin-top: 8px !important;
  margin-bottom: 14px !important;
  text-align: left !important;
}
.jatsstudio-article .jats-author-idline{
  text-align: left !important;
  line-height: 1.6 !important;
}
.jatsstudio-article .jats-author-idline + .jats-author-idline{
  margin-top: 6px !important;
}

/* 6) Historial (recibido/aceptado/publicado): 18px antes y después */
.jatsstudio-article .jats-historyline{
  margin-top: 18px !important;
  margin-bottom: 18px !important;
}

/* 7) Derechos de autor: 18px antes */
.jatsstudio-article .jats-copyright{
  margin-top: 18px !important;
}


/* ============================================================
   Estadísticas internas (tablero al final del artículo)
   ============================================================ */
.jatsstudio-article .jats-intstats{
  margin: 42px auto 0 auto;
  padding: 22px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);
}
.jatsstudio-article .jats-intstats-head{ margin-bottom: 18px; }
.jatsstudio-article .jats-intstats-title{
  margin: 0 0 6px 0;
  font-size: 1.35rem;
  line-height: 1.2;
}
.jatsstudio-article .jats-intstats-subtitle{
  font-size: 0.95rem;
  line-height: 1.35;
  opacity: 0.85;
}
.jatsstudio-article .jats-intstats-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
@media (min-width: 920px){
  .jatsstudio-article .jats-intstats-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.jatsstudio-article .jats-intstats-card{
  padding: 14px 14px 12px 14px;
  border-radius: 14px;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.06);
}
.jatsstudio-article .jats-intstats-label{
  font-size: 0.86rem;
  line-height: 1.2;
  opacity: 0.86;
}
.jatsstudio-article .jats-intstats-value{
  margin-top: 6px;
  font-size: 1.7rem;
  line-height: 1.1;
  font-weight: 700;
}
.jatsstudio-article .jats-intstats-note{
  margin-top: 6px;
  font-size: 0.78rem;
  line-height: 1.25;
  opacity: 0.75;
}
.jatsstudio-article .jats-intstats-recurrent{
  margin-top: 18px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(0,0,0,0.02);
}
.jatsstudio-article .jats-intstats-panel-title{
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0 0 10px 0;
}
.jatsstudio-article .jats-intstats-recurrent-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.jatsstudio-article .jats-intstats-recurrent-list li{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.jatsstudio-article .jats-intstats-recurrent-list li:first-child{ border-top: none; }
.jatsstudio-article .jats-intstats-recurrent-list .name{
  flex: 1 1 auto;
  min-width: 0;
}
.jatsstudio-article .jats-intstats-recurrent-list .count{
  flex: 0 0 auto;
  font-weight: 700;
}
.jatsstudio-article .jats-intstats-empty{
  opacity: 0.75;
  font-size: 0.92rem;
}
.jatsstudio-article .jats-intstats-charts{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 920px){
  .jatsstudio-article .jats-intstats-charts{
    grid-template-columns: 1fr 1fr;
  }
}
.jatsstudio-article .jats-intstats-panel{
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(0,0,0,0.02);
}
.jatsstudio-article .jats-intstats-chart canvas{
  width: 100% !important;
  height: auto !important;
}
.jatsstudio-article .jats-intstats-i18n{ display: none; }

/* ===========================
   JATS Studio — Estadísticas internas
   =========================== */

.jats-internal-stats{
  margin-top: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(0,0,0,0.10);
}

.jats-intstats-header{
  margin-bottom: 1rem;
}

.jats-intstats-title{
  margin: 0 0 .35rem 0;
  font-size: 1.35rem;
  line-height: 1.2;
}

.jats-intstats-desc{
  margin: 0;
  opacity: .85;
  max-width: 70ch;
}

.jats-intstats-board{
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  margin-top: 1rem;
}

@media (min-width: 920px){
  .jats-intstats-board{
    grid-template-columns: repeat(3, 1fr);
  }
}

.jats-intstats-card{
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  padding: .9rem .95rem;
  background: rgba(255,255,255,0.85);
}

.jats-intstats-label{
  font-size: .92rem;
  opacity: .85;
  margin-bottom: .35rem;
}

.jats-intstats-value{
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.jats-intstats-note{
  margin-top: .35rem;
  font-size: .92rem;
  opacity: .85;
}

.jats-intstats-charts{
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
  margin-top: 1.1rem;
}

@media (min-width: 920px){
  .jats-intstats-charts{
    grid-template-columns: repeat(2, 1fr);
  }
}

.jats-intstats-panel{
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  padding: .9rem .95rem;
  background: rgba(255,255,255,0.85);
}

.jats-intstats-panel-title{
  font-weight: 700;
  margin-bottom: .35rem;
}

.jats-intstats-chart{
  margin-top: .65rem;
}

.jats-intstats-chart canvas{
  width: 100% !important;
  height: 260px !important;
  display: block;
}

.jats-intstats-mini-list{
  list-style: none;
  padding: 0;
  margin: .65rem 0 0 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.jats-intstats-mini-list li{
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  border-top: 1px dashed rgba(0,0,0,0.10);
  padding-top: .35rem;
}

.jats-intstats-mini-list li:first-child{
  border-top: none;
  padding-top: 0;
}

.jats-intstats-mini-list .label{
  flex: 1;
  min-width: 0;
}

.jats-intstats-mini-list .count{
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* ===========================
   Estadísticas internas — Señales de transparencia
   =========================== */

.jats-best-practices{
  margin-top: 1rem;
}

.jats-intstats-card--bp{
  margin-top: 1rem;
}

.jats-bp-desc{
  margin-top: .35rem;
  opacity: .85;
}

.jats-bp-list{
  list-style: none;
  padding: 0;
  margin: .75rem 0 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: .35rem .9rem;
}

@media (min-width: 920px){
  .jats-bp-list{
    grid-template-columns: 1fr 1fr;
  }
}

.jats-bp-item{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  border-top: 1px dashed rgba(0,0,0,0.10);
  padding-top: .35rem;
}

.jats-bp-item:first-child{
  border-top: none;
  padding-top: 0;
}

.jats-bp-label{
  flex: 1;
  min-width: 0;
}

.jats-bp-value{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  white-space: nowrap;
}

.jats-bp-chip{
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .1rem .55rem;
  border: 1px solid rgba(0,0,0,0.15);
  font-weight: 700;
  font-size: .85em;
}

.jats-bp-chip.is-yes{
  background: rgba(0, 128, 0, 0.08);
  border-color: rgba(0, 128, 0, 0.22);
}

.jats-bp-chip.is-no{
  background: rgba(160, 0, 0, 0.07);
  border-color: rgba(160, 0, 0, 0.20);
}

.jats-bp-chip.is-na{
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.12);
  opacity: .85;
}

.jats-bp-meta{
  font-variant-numeric: tabular-nums;
  opacity: .85;
}

.jats-bp-more{
  margin-top: .75rem;
}

.jats-bp-more > summary{
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.jats-bp-more > summary::-webkit-details-marker{
  display: none;
}

.jats-bp-more-body{
  margin-top: .5rem;
}


/* ===========================
   Estadísticas internas (dashboard)
   =========================== */

.jats-u-sr-only{
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.jats-intstats{
	margin-top: 28px;
	padding: 18px 18px 16px;
	border: 1px solid #e6e6e6;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 2px 14px rgba(0,0,0,0.04);
}

.jats-intstats__head{ margin-bottom: 14px; }
.jats-intstats__title{
	margin: 0 0 6px 0;
	font-size: 1.12rem;
	line-height: 1.25;
}
.jats-intstats__subtitle{
	margin: 0;
	color: #666;
	font-size: 0.95rem;
	line-height: 1.35;
}

.jats-intstats-grid{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: 14px;
}

@media (max-width: 860px){
	.jats-intstats-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
	.jats-intstats-grid{ grid-template-columns: 1fr; }
}

.jats-intstats-card{
	border: 1px solid #ececec;
	border-radius: 12px;
	padding: 12px 12px 10px;
	background: linear-gradient(180deg, #ffffff, #fbfbfb);
}
.jats-intstats-card__label{
	color: #5c5c5c;
	font-size: 0.92rem;
	margin-bottom: 8px;
}
.jats-intstats-card__value{
	font-size: 1.55rem;
	font-weight: 700;
	line-height: 1;
	color: #1f1f1f;
}

.jats-intstats-recurrent{
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid #efefef;
}
.jats-intstats-recurrent__title{
	font-weight: 650;
	margin-bottom: 8px;
}
.jats-intstats-recurrent__list{
	margin: 0;
	padding-left: 18px;
}
.jats-intstats-recurrent__src{ font-weight: 600; }
.jats-intstats-recurrent__count{ color: #666; }

.jats-intstats-charts{
	margin-top: 16px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
@media (max-width: 860px){
	.jats-intstats-charts{ grid-template-columns: 1fr; }
}
.jats-intstats-chart{
	border: 1px solid #efefef;
	border-radius: 12px;
	padding: 12px;
	background: #fff;
}
.jats-intstats-chart__title{
	font-weight: 650;
	margin-bottom: 8px;
}

/* ===========================
   Transparencia y buenas prácticas — versión "dashboard"
   =========================== */

.jats-best-practices .jats-intstats-card--bp{
  padding: 1rem;
}

.jats-best-practices .jats-intstats-panel-title{
  margin-bottom: .35rem;
}

.jats-best-practices .jats-bp-desc{
  margin: 0 0 .75rem 0;
  opacity: .85;
}

/* En vez de lista larga: grid de "mini-cards" */
.jats-best-practices .jats-bp-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
}

@media (min-width: 820px){
  .jats-best-practices .jats-bp-list{
    grid-template-columns: 1fr 1fr;
  }
}

/* Cada item como tarjeta compacta */
.jats-best-practices .jats-bp-item{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
  padding: .6rem .75rem;
  background: rgba(255,255,255,.9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.jats-best-practices .jats-bp-label{
  font-weight: 600;
  line-height: 1.25;
}

.jats-best-practices .jats-bp-value{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
}

/* Chips más “pro” y consistentes */
.jats-best-practices .jats-bp-chip{
  border-radius: 999px;
  padding: .18rem .6rem;
  font-size: .82rem;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,.14);
}

.jats-best-practices .jats-bp-chip.is-yes{
  background: rgba(0, 128, 0, .10);
  border-color: rgba(0, 128, 0, .22);
}

.jats-best-practices .jats-bp-chip.is-no{
  background: rgba(160, 0, 0, .09);
  border-color: rgba(160, 0, 0, .22);
}

.jats-best-practices .jats-bp-chip.is-na{
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.12);
  opacity: .85;
}

.jats-best-practices .jats-bp-meta{
  opacity: .85;
  font-variant-numeric: tabular-nums;
}

/* "Ver más" como panel discreto */
.jats-best-practices .jats-bp-more{
  margin-top: .75rem;
  border-top: 1px dashed rgba(0,0,0,.12);
  padding-top: .6rem;
}

.jats-best-practices .jats-bp-more > summary{
  cursor: pointer;
  font-weight: 700;
  opacity: .95;
  list-style: none;
}

.jats-best-practices .jats-bp-more > summary::-webkit-details-marker{
  display: none;
}


/* ===========================
   Modal Redes (Afiche Social)
   =========================== */

.jats-social-modal{
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.55);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 22px;
	z-index: 99999;
}
.jats-social-modal.is-open{ display: flex; }

.jats-social-panel{
	width: min(1020px, 100%);
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 18px 60px rgba(0,0,0,.25);
	position: relative;
	max-height: calc(100vh - 44px);
	overflow: auto;
	padding: 18px 18px 16px 18px;
	border: 1px solid rgba(0,0,0,.10);
}

.jats-social-close{
	position: absolute;
	right: 12px;
	top: 10px;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	border: 1px solid rgba(0,0,0,.12);
	background: rgba(0,0,0,.03);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.jats-social-head{
	padding-right: 46px;
	margin-bottom: 14px;
}
.jats-social-title{
	font-weight: 750;
	font-size: 1.15rem;
	margin-bottom: 4px;
}
.jats-social-sub{
	opacity: .8;
	font-size: .95rem;
}

.jats-social-grid{
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 14px;
}
@media (max-width: 900px){
	.jats-social-grid{ grid-template-columns: 1fr; }
}

.jats-social-btnrow{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 12px;
}

.jats-social-actions{
	margin-top: 10px;
}

.jats-social-note{
	margin-top: 10px;
	font-size: .92rem;
	opacity: .8;
}

.jats-social-preview{
	border: 1px solid #efefef;
	border-radius: 12px;
	padding: 12px;
	background: #fafafa;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 380px;
}

#jats-social-preview-img{
	max-width: 100%;
	height: auto;
	border-radius: 12px;
	border: 1px solid rgba(0,0,0,.10);
	background: #fff;
}

/* =========================================================
   OJS TEMA POR DEFECTO: eliminar sidebar izquierdo y subir main
   (No afecta HealthSciences porque depende de .pkp_structure_head)
   ========================================================= */

/* 1) Nunca mostrar la sidebar izquierda y que no deje “hueco” */
.pkp_structure_head ~ .pkp_structure_content .pkp_structure_sidebar.left[role="complementary"],
.pkp_structure_head ~ .pkp_structure_content .pkp_structure_sidebar.left{
	display: none !important;
}

/* 2) Quitar padding/márgenes que quedan como reserva del sidebar */
.pkp_structure_head ~ .pkp_structure_content,
.pkp_structure_head ~ .pkp_structure_content .pkp_structure_main{
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* 3) Forzar que el main ocupe todo el ancho disponible (sin desplazamiento lateral) */
.pkp_structure_head ~ .pkp_structure_content .pkp_structure_main[role="main"],
.pkp_structure_head ~ .pkp_structure_content .pkp_structure_main{
	margin-left: 0 !important;
	padding-left: 0 !important;
	width: 100% !important;
	max-width: none !important;
	flex: 1 1 auto !important;
}

/* 4) Si el layout del theme usa grid y “reserva” columna del sidebar */
.pkp_structure_head ~ .pkp_structure_content{
	grid-template-columns: 1fr !important;
}


/* OJS tema por defecto: desactivar por completo .pkp_structure_main::after
   (evita que exista el pseudo-elemento que dibuja la línea) */
.pkp_structure_main::after{
	content: none !important;
	display: none !important;
}
/* =========================================================
   PATCH — 2026-02-01
   Ajustes visuales para:
   - "Estadísticas internas" (título como sección + grid 4 col + toggle tipologías)
   - "Transparencia y buenas prácticas" (título como sección)
   NOTA: Este bloque se agrega AL FINAL para NO perder líneas previas.
   ========================================================= */

/* 1) Títulos como secciones principales (misma regla editorial) */
.jatsstudio-article .jats-intstats-title,
.jatsstudio-article .jats-bp-title{
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  margin-top: 72pt;
  margin-bottom: 10pt;

  /* Mantener coherencia con h2 global */
  font-size: 20px;
  line-height: 1.2;
}

/* 2) Aclaraciones debajo del título: ancho cómodo y tono similar */
.jatsstudio-article .jats-intstats-desc,
.jatsstudio-article .jats-bp-desc{
  max-width: 85ch;
  margin-left: auto;
  margin-right: auto;
}

/* 3) Grid de tarjetas: 4 por línea en pantallas de computador */
@media (min-width: 920px){
  .jatsstudio-article .jats-intstats-board{
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 4) "Ver todas las tipologías" (toggle) */
.jatsstudio-article .jats-intstats-moreline{
  grid-column: 1 / -1;
  margin: .25rem 0 .15rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.jatsstudio-article .jats-intstats-morebtn{
  appearance: none;
  border: 1px dashed rgba(10,11,15,.22);
  background: rgba(10,11,15,.03);
  color: rgba(10,11,15,.84);
  border-radius: 999px;
  padding: .35rem .85rem;
  cursor: pointer;
  font-weight: 800;
  font-size: .92rem;
  line-height: 1.2;
}
.jatsstudio-article .jats-intstats-morebtn:hover{
  background: rgba(10,11,15,.05);
}
.jatsstudio-article .jats-intstats-morebtn:focus{
  outline: 2px solid rgba(10,11,15,.22);
  outline-offset: 2px;
}

/* 5) Contenedor de tipologías extra (i–p): oculto por defecto */
.jatsstudio-article .jats-intstats-extra-types{
  grid-column: 1 / -1;
  display: none; /* se muestra cuando #jats-internal-stats tiene .show-extra-types */
  margin-top: .35rem;
  padding-top: .35rem;
  border-top: 1px dashed rgba(10,11,15,.12);

  /* grilla interna replica la de las tarjetas */
  grid-template-columns: 1fr;
  gap: .75rem;
}

/* Mostrar cuando el JS agrega la clase en la sección */
.jatsstudio-article #jats-internal-stats.show-extra-types .jats-intstats-extra-types{
  display: grid;
}

@media (min-width: 920px){
  .jatsstudio-article .jats-intstats-extra-types{
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 6) Sección "Transparencia y buenas prácticas": que se comporte como sección */
.jatsstudio-article #jats-best-practices{
  margin-top: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(0,0,0,0.10);
}

/* 7) Tablero BP: asegurar separación y grid consistente */
.jatsstudio-article .jats-bp-board{
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}

/* 8) Detalle desplegable BP: que el summary se vea como acción clara */
.jatsstudio-article .jats-bp-more > summary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .35rem .85rem;
  border-radius: 999px;
  border: 1px dashed rgba(10,11,15,.22);
  background: rgba(10,11,15,.03);
  cursor: pointer;
}
.jatsstudio-article .jats-bp-more > summary:hover{
  background: rgba(10,11,15,.05);
}

/* ================================
   Buscador interno (solo <body>)
   ================================ */

.jatsstudio-find{
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 9999;
	display: flex;
	align-items: center;
	gap: 8px;
}

.jatsstudio-find__toggle{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	border: 1px solid rgba(0,0,0,.18);
	background: #fff;
	box-shadow: 0 6px 20px rgba(0,0,0,.10);
	cursor: pointer;
}

.jatsstudio-find__icon{
	font-size: 18px;
	line-height: 1;
}

.jatsstudio-find__panel{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 8px;
	border-radius: 999px;
	border: 1px solid rgba(0,0,0,.18);
	background: #fff;
	box-shadow: 0 6px 20px rgba(0,0,0,.10);
}

.jatsstudio-find__input{
	width: min(320px, 60vw);
	font: inherit;
	line-height: 1.2;
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid rgba(0,0,0,.18);
	background: #fff;
	outline: none;
}

.jatsstudio-find__input:focus{
	border-color: rgba(0,0,0,.35);
}

.jatsstudio-find__go{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	border: 1px solid rgba(0,0,0,.18);
	background: #fff;
	cursor: pointer;
}

.jatsstudio-find-results{
	position: fixed;
	top: 64px;
	right: 16px;
	z-index: 9998;
	width: min(520px, calc(100vw - 24px));
	max-height: min(70vh, 640px);
	overflow: auto;
	border-radius: 14px;
	border: 1px solid rgba(0,0,0,.18);
	background: #fff;
	box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

.jatsstudio-find-results__head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border-bottom: 1px solid rgba(0,0,0,.10);
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 1;
}

.jatsstudio-find-results__title{
	font-weight: 700;
}

.jatsstudio-find-results__close{
	border: 1px solid rgba(0,0,0,.18);
	background: #fff;
	border-radius: 10px;
	width: 34px;
	height: 30px;
	cursor: pointer;
}

.jatsstudio-find-results__meta{
	padding: 8px 12px 4px;
	font-size: 13px;
	opacity: .85;
}

.jatsstudio-find-results__list{
	padding: 6px 8px 10px;
	display: grid;
	gap: 6px;
}

.jatsstudio-find-results__item{
	width: 100%;
	text-align: left;
	padding: 10px 10px;
	border-radius: 12px;
	border: 1px solid rgba(0,0,0,.10);
	background: #fff;
	cursor: pointer;
}

.jatsstudio-find-results__item:hover{
	border-color: rgba(0,0,0,.22);
}

.jatsstudio-find-results__where{
	display: block;
	font-size: 12px;
	opacity: .70;
	margin-top: 4px;
}

.jatsstudio-find-focus{
	outline: 2px solid rgba(0,0,0,.35);
	outline-offset: 4px;
	border-radius: 8px;
}

/* En móvil: reduce ancho del input */
@media (max-width: 600px){
	.jatsstudio-find__input{ width: min(240px, 62vw); }
}

/* =========================================================
   OVERRIDE VISUAL — Buscador moderno (no sticky) + modal
   Pegar al FINAL de styles/jatsstudio.css
   ========================================================= */

/* 1) El buscador queda “pegado” al papel (shell), NO a la pantalla */
.jatsstudio-shell{
	position: relative; /* ancla el buscador al shell */
}

/* 2) Botón + panel modernos, arriba-derecha del shell, NO sticky */
.jatsstudio-find{
	position: absolute !important;   /* override al JS que lo pone fixed */
	top: 14px !important;
	right: 14px !important;
	left: auto !important;

	z-index: 2500 !important;

	display: flex !important;
	flex-direction: row-reverse; /* botón a la derecha, panel se despliega hacia la izquierda */
	align-items: center;
	gap: 10px;

	/* evita que un theme lo “herede” raro */
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Botón circular moderno */
.jatsstudio-find__toggle{
	width: 42px !important;
	height: 42px !important;
	border-radius: 999px !important;

	border: 1px solid rgba(0,0,0,.10) !important;
	background: rgba(255,255,255,.85) !important;

	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

	box-shadow: 0 10px 28px rgba(0,0,0,.14) !important;
	cursor: pointer;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
	pointer-events: auto;
}

.jatsstudio-find__toggle:hover{
	transform: translateY(-1px);
	box-shadow: 0 16px 40px rgba(0,0,0,.18) !important;
	background: rgba(255,255,255,.95) !important;
}

.jatsstudio-find__toggle:active{
	transform: translateY(0);
}

/* Reemplazo visual del emoji por un ícono SVG “lineal” moderno */
.jatsstudio-find__icon{
	font-size: 0 !important; /* oculta el emoji */
	line-height: 0 !important;
	width: 18px;
	height: 18px;
}

.jatsstudio-find__toggle::before{
	content: "";
	width: 18px;
	height: 18px;
	display: block;
	background: rgba(0,0,0,.78);

	/* Máscara SVG (lupa lineal) */
	-webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z' fill='none' stroke='black' stroke-width='2'/>\
<path d='M16.2 16.2 21 21' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/>\
</svg>") no-repeat center / contain;
	mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z' fill='none' stroke='black' stroke-width='2'/>\
<path d='M16.2 16.2 21 21' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/>\
</svg>") no-repeat center / contain;
}

/* 3) Panel (input) al lado: estilo “pill”, sin desplegar el layout */
.jatsstudio-find__panel{
	display: inline-flex;
	align-items: center;
	gap: 10px;

	padding: 8px 10px !important;
	border-radius: 999px !important;

	border: 1px solid rgba(0,0,0,.10) !important;
	background: rgba(255,255,255,.96) !important;

	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

	box-shadow: 0 14px 40px rgba(0,0,0,.16) !important;
}

/* input moderno (sin borde duro) */
.jatsstudio-find__input{
	width: min(340px, 55vw) !important;
	padding: 9px 2px !important;

	border: none !important;
	outline: none !important;
	background: transparent !important;

	font: inherit !important;
}

/* botón Enter minimalista */
.jatsstudio-find__go{
	width: 38px !important;
	height: 38px !important;
	border-radius: 999px !important;

	border: 1px solid rgba(0,0,0,.10) !important;
	background: rgba(0,0,0,.06) !important;

	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	transition: transform .12s ease, background .12s ease;
}

.jatsstudio-find__go:hover{
	transform: translateY(-1px);
	background: rgba(0,0,0,.10) !important;
}

/* 4) Resultados como MODAL centrado + overlay negro al 30% */
.jatsstudio-find-results{
	position: fixed !important;        /* modal real */
	left: 50% !important;
	right: auto !important;
	top: 14vh !important;
	transform: translateX(-50%) !important;

	z-index: 2400 !important;

	width: min(860px, calc(100vw - 28px)) !important;
	max-height: 72vh !important;

	border-radius: 18px !important;
	border: 1px solid rgba(0,0,0,.10) !important;
	background: rgba(255,255,255,.98) !important;

	box-shadow: 0 26px 90px rgba(0,0,0,.26) !important;
	overflow: hidden !important;
}

/* overlay (oscurece TODO detrás del modal) */
.jatsstudio-find-results::before{
	content: "";
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.30);
	backdrop-filter: blur(1.5px);
	-webkit-backdrop-filter: blur(1.5px);
	z-index: -1;
}

/* head más limpio */
.jatsstudio-find-results__head{
	display: flex;
	align-items: center;
	justify-content: space-between;

	padding: 12px 14px !important;
	border-bottom: 1px solid rgba(0,0,0,.08) !important;

	background: rgba(255,255,255,.92) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.jatsstudio-find-results__title{
	font-size: 14px;
	letter-spacing: .2px;
	opacity: .9;
}

.jatsstudio-find-results__close{
	width: 40px !important;
	height: 36px !important;

	border-radius: 12px !important;
	border: 1px solid rgba(0,0,0,.10) !important;
	background: rgba(0,0,0,.06) !important;

	cursor: pointer;
}

.jatsstudio-find-results__meta{
	padding: 10px 14px 6px !important;
	font-size: 13px !important;
	opacity: .75 !important;
}

/* lista “card” moderna */
.jatsstudio-find-results__list{
	padding: 10px 12px 14px !important;
	display: grid;
	gap: 10px;
}

.jatsstudio-find-results__item{
	text-align: left;
	padding: 12px 12px !important;

	border-radius: 14px !important;
	border: 1px solid rgba(0,0,0,.08) !important;
	background: #fff !important;

	box-shadow: 0 12px 26px rgba(0,0,0,.08);
	transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.jatsstudio-find-results__item:hover{
	transform: translateY(-1px);
	border-color: rgba(0,0,0,.14) !important;
	box-shadow: 0 18px 34px rgba(0,0,0,.12);
}

.jatsstudio-find-results__where{
	display: block;
	margin-top: 8px;
	font-size: 12px !important;
	opacity: .60 !important;
}

/* realce del destino más elegante */
.jatsstudio-find-focus{
	outline: 2px solid rgba(0,0,0,.28) !important;
	outline-offset: 6px !important;
	border-radius: 12px !important;
	box-shadow: 0 0 0 10px rgba(0,0,0,.06);
}

/* 5) Móvil: panel bajo el botón si no cabe */
@media (max-width: 560px){
	.jatsstudio-find{
		top: 10px !important;
		right: 10px !important;
		flex-direction: column; /* botón arriba, panel abajo */
		align-items: flex-end;
	}

	.jatsstudio-find__panel{
		border-radius: 16px !important;
	}

	.jatsstudio-find__input{
		width: min(320px, calc(100vw - 36px)) !important;
	}
}

/* Ajuste fino: subir el buscador (equivale a -50px respecto a top:14px) */
.jatsstudio-find{
	top: -70px !important;
	right: -50px !important;
}

/* Resultados: hacer que la LISTA sea scrolleable */
.jatsstudio-find-results{
	display: flex !important;
	flex-direction: column !important;
}

/* Head y meta no crecen */
.jatsstudio-find-results__head,
.jatsstudio-find-results__meta{
	flex: 0 0 auto !important;
}



/* La lista toma el resto y scrollea */
.jatsstudio-find-results__list{
	flex: 1 1 auto !important;
	min-height: 0 !important;            /* clave para que overflow funcione en flex */
	overflow-y: auto !important;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* FIX CRÍTICO: respetar el atributo hidden (si no, quedan siempre visibles) */
.jatsstudio-find__panel[hidden],
.jatsstudio-find-results[hidden]{
  display: none !important;
}