/* #### Edition ####*/
	.edition {
		padding: 1rem !important;
		margin: 0 auto !important;
	}

	.edition a {
		color: #1e40af !important; /* primary */
		text-decoration: none !important;
		border-bottom: 1px dotted rgba(30,64,175,.5);
		border-radius: 2px;
	}

	.edition a:hover, .edition a:focus {
		background-color: rgba(30,64,175,.08) !important;
		outline: none !important;
	}

	.edition h2 {
		font-size: 1.5rem !important;
		font-weight: 500 !important;
		line-height: 1.2 !important;
		margin-bottom: 1rem !important;
	}

	.edition h3 {
		font-size: 1.4rem !important;
		font-weight: 500 !important;
		line-height: 1.2 !important;
		margin-bottom: 1rem !important;
	}

	.edition h4 {
		font-size: 1.3rem !important;
		font-weight: 500 !important;
		line-height: 1.2 !important;
		margin-bottom: 1rem !important;
	}

	.edition h5 {
		font-size: 1.2rem !important;
		font-weight: 500 !important;
		line-height: 1.2 !important;
		margin-bottom: 1rem !important;
	}

	.edition h6 {
		font-size: 1.1rem !important;
		font-weight: 500 !important;
		line-height: 1.2 !important;
		margin-bottom: 1rem !important;
	}

	.edition ol, .edition ul {
		margin-bottom: 1rem !important;
		padding-left: 1.5rem !important;
	}

	.edition ol {
		list-style-type: decimal !important;
	}

	.edition ol > li {
		list-style: inherit !important;
		display: list-item !important;
	}

	/* Mirror CKEditor 5 .ck-content nested list conventions */
	.edition ol ol {
		list-style-type: lower-latin;
	}
	.edition ol ol ol {
		list-style-type: lower-roman;
	}
	.edition ol ol ol ol {
		list-style-type: upper-latin;
	}
	.edition ol ol ol ol ol {
		list-style-type: upper-roman;
	}

	/* Also handle nesting via li > ol (CKEditor document lists) */
	.edition li > ol {
		list-style-type: lower-latin;
	}
	.edition li > ol li > ol {
		list-style-type: lower-roman;
	}

	/* Respect explicit type attribute or inline style */
	.edition ol[type="a"], .edition ol[style*="lower-alpha"], .edition ol[style*="lower-latin"] {
		list-style-type: lower-alpha !important;
	}
	.edition ol[type="A"], .edition ol[style*="upper-alpha"], .edition ol[style*="upper-latin"] {
		list-style-type: upper-alpha !important;
	}
	.edition ol[type="i"], .edition ol[style*="lower-roman"] {
		list-style-type: lower-roman !important;
	}
	.edition ol[type="I"], .edition ol[style*="upper-roman"] {
		list-style-type: upper-roman !important;
	}

	.edition ul {
		list-style-type: disc !important;
	}

	.edition li {
		font-size: 1rem !important;
		line-height: 1.3 !important;
		margin-bottom: 0.6rem !important;
		text-align: justify !important;
	}

	.edition li a,
	#article-body a {
		overflow-wrap: break-word !important;
		word-break: break-all !important;
		display: inline !important;
	}

	.edition li,
	.edition ol,
	.edition ul {
		overflow-wrap: break-word;
		word-wrap: break-word;
		max-width: 100%;
		overflow: visible;
	}

	#article-body {
		overflow-wrap: break-word;
		word-wrap: break-word;
		max-width: 100%;
		overflow: hidden;
	}

	.edition p {
		font-size: 1rem !important;	
		line-height: 1.3 !important;
		text-align: justify;
		margin-bottom: 1rem !important;
	}

/* #### Abstract ####*/
	.abs-content {
		display: none;
	}
	.abs-content .text-justify p + p,
	.summary-content p + p {
		margin-top: 0.75rem;
	}

	.lang-active {
		background: white;
		color: #1e40af;
		font-weight: 600;
		box-shadow: 0 1px 3px rgba(0,0,0,.2);
		border-radius: 9999px;
	}
	html.dark .lang-active {
		background: #374151;
		color: white;
	}

	.fade-enter {
		opacity: 0;
		transform: translateY(4px);
	}
	.fade-enter-active {
		transition: opacity 0.25s ease, transform 0.25s ease;
		opacity: 1;
		transform: translateY(0);
	}

	.material-symbols-outlined {
		font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
		font-size: 24px; 
	}::-webkit-scrollbar {
		width: 6px;
	}
	::-webkit-scrollbar-track {
		background: transparent; 
	}
	::-webkit-scrollbar-thumb {
		background: #d1d5db; 
		border-radius: 10px;
	}
	::-webkit-scrollbar-thumb:hover {
		background: #9ca3af; 
	}


/* #### Authors ####*/
	/* Autores: móvil 1 por línea, escritorio 3 por fila usando clases de Tailwind en HTML
		CSS mínimo: ocultar comas en móvil y asegurar que los items no introduzcan saltos inesperados. */
	@media (max-width: 767px) {
		.authors-text .author-item {
			display: block !important;
			margin-bottom: 4px;
		}
		.authors-text .comma { display: none !important; }
	}

	/* Desktop: show authors inline and insert a soft break after every 3 authors */
	@media (min-width: 768px) {
		.authors-text .author-item { display: inline-flex; margin-right: .5rem; }
		.authors-text .author-item:nth-child(3n)::after { content: ""; display: block; height: 0; }
	}


/* #### Scrollspy ####*/
	/* Legacy: .pc-only and .pc-break removed — layout now uses Tailwind responsive utilities */
	/* TOC active state styled like Tailwind hover: blue + bold + left border */
	.toc-active {
		color: #1e40af !important; /* primary */
		font-weight: 700 !important;
		border-left: 2px solid #1e40af !important;
		margin-left: -2px !important;
	}
	.dark .toc-active {
		color: #60a5fa !important; /* blue-300 */
		border-left-color: #60a5fa !important;
	}
	/* Ajuste para que los h2 anclados no queden ocultos bajo el header fijo */
	#article-body h2 { scroll-margin-top: 5.5rem; }

/* #### Iamges ####*/
	/* cursor hint for content images */
    #article-body img { cursor: zoom-in; }
    /* smooth reflow when adjusting safe areas for captions */
    #lb-stage { transition: padding-top 150ms ease, padding-bottom 150ms ease; will-change: padding; }
    /* force caption1 content to be centered */
    #lb-caption1 { text-align: center !important; }
    /* ensure inline frame caption1 centered even if inner HTML sets text-align */
    .ad-cap-top { display: flex; justify-content: center; align-items: center; }
    .ad-cap-top-inner { display: inline-block; text-align: center !important; }
    /* ensure long multi-line caption1 stays centered regardless of inner tags */
    .ad-cap-top-inner > p,
    .ad-cap-top-inner > div,
    .ad-cap-top-inner > ul,
    .ad-cap-top-inner > ol {
        display: inline-block;
        text-align: center !important;
        margin-top: 0;
        margin-bottom: 0;
    }
    /* content captions: stack paragraphs vertically */
    .ad-cap-bottom { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
    .ad-cap-top p, .ad-cap-bottom p { margin-top: 0 !important; margin-bottom: 0.25rem !important; }
    .ad-cap-top p:last-child, .ad-cap-bottom p:last-child { margin-bottom: 0 !important; }

    /* interactive references */
    .ad-cite { color: #1e40af; border-bottom: 1px dotted rgba(30,64,175,.5); cursor: pointer; padding: 0 2px; border-radius: 2px; }
    .ad-cite:hover, .ad-cite:focus, .ad-cite-active { background-color: rgba(30,64,175,.08); outline: none; }
    .dark .ad-cite { color: #60a5fa; border-bottom-color: rgba(96,165,250,.6); }
    .dark .ad-cite:hover, .dark .ad-cite:focus, .dark .ad-cite-active { background-color: rgba(96,165,250,.16); }
    .ad-cite-popover { position: absolute; z-index: 400; background: #ffffff; color: #111827; border: 1px solid #E5E7EB; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,.12); padding: 10px 12px; max-width: 520px; }
    .dark .ad-cite-popover { background: #1f2937; color: #E5E7EB; border-color: #374151; }
    .ad-cite-pop-title { font-weight: 600; font-size: 12px; color: #1e40af; margin-bottom: 8px; border-bottom: 1px solid #E5E7EB; padding-bottom: 6px; }
    .dark .ad-cite-pop-title { color: #60a5fa; border-color: #374151; }
    .ad-cite-list { font-size: 12px; line-height: 1.4; }
    .ad-cite-popover a { color: #1e40af; text-decoration: underline; }
    .ad-cite-popover a:hover { color: #1e3a8a; }
    .dark .ad-cite-popover a { color: #60a5fa; }
    .dark .ad-cite-popover a:hover { color: #93c5fd; }
    .ad-pop-ref-btn { font-size: 11px; padding: 2px 8px; border-radius: 9999px; border: 1px solid #1e3a8a; background: #1e40af; color: #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,.08); cursor: pointer; }
    .ad-pop-ref-btn:hover { background: #1e3a8a; }
    .ad-pop-ref-btn:focus { outline: 2px solid rgba(59,130,246,.6); outline-offset: 2px; }
    .dark .ad-pop-ref-btn { border-color: #1e3a8a; background: #1e40af; color: #ffffff; }
    .ad-ref-highlight { background: #FEF3C7; transition: background-color 1.6s ease; }
    .dark .ad-ref-highlight { background: rgba(251, 191, 36, 0.25); }
    .ad-ref-back { opacity: 0; margin-left: .5rem; font-size: 11px; padding: 2px 8px; border-radius: 9999px; border: 1px solid #1e3a8a; background: #1e40af; color: #ffffff; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
    .ad-ref-back:hover { background: #1e3a8a; }
    .ad-ref-back:focus { outline: 2px solid rgba(59,130,246,.6); outline-offset: 2px; }
    .dark .ad-ref-back { border-color: #1e3a8a; background: #1e40af; color: #ffffff; }
    li:hover > .ad-ref-back, .ad-ref-show-back > .ad-ref-back { opacity: 1; transition: opacity .15s ease; }
    .ad-cite-highlight { background: rgba(30,64,175,0.12); transition: background-color 1.2s ease; }



/* ============================================================
   Estilos específicos de la página de artículo
   (movidos desde resources/views/editions/article.blade.php
   para separar maquetación de presentación).
   ============================================================ */

/* --- Layout general: gutters grises con tarjeta blanca central --- */
body { background-color: #f3f4f6 !important; }
html.dark body { background-color: #0b1220 !important; }

/* --- Pie de figura/tabla (caption 2): tipografía más pequeña.
   Especificidad alta para vencer a .edition p { font-size: 1rem !important }.
   Cubrimos tanto el wrapper de imágenes (.ad-cap-bottom) como cualquier
   elemento marcado con .figcaption-2 (tablas, figuras u otros bloques),
   sin exigir un ancestro <figure> (las tablas no lo tienen). --- */
.edition .ad-cap-bottom,
.edition .ad-cap-bottom *,
.edition .ad-cap-bottom p,
.edition .figcaption-2,
.edition .figcaption-2 *,
.edition .figcaption-2 p,
.edition figcaption.figcaption-2,
.edition figcaption.figcaption-2 * {
    font-size: 0.78rem !important; /* ~12.5px */
    line-height: 1.4 !important;
}
.edition .ad-cap-bottom,
.edition .figcaption-2,
.edition figcaption.figcaption-2 {
    color: #4b5563;
}
html.dark .edition .ad-cap-bottom,
html.dark .edition .figcaption-2,
html.dark .edition figcaption.figcaption-2 {
    color: #9ca3af;
}

/* --- Popover de referencias bibliográficas: más ancho y con scroll
   para que no se desborde cuando hay muchas referencias.
   Resaltado visual reforzado para diferenciarlo del fondo del artículo. --- */
.ad-cite-popover {
    max-width: min(820px, 92vw) !important;
    width: min(820px, 92vw) !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-top: 4px solid #243768 !important;
    border-radius: 10px !important;
    box-shadow:
        0 24px 50px -12px rgba(15, 23, 42, 0.35),
        0 8px 16px -4px rgba(15, 23, 42, 0.18),
        0 0 0 1px rgba(36, 55, 104, 0.08) !important;
    padding: 14px 16px !important;
}
html.dark .ad-cite-popover {
    background: #1f2937 !important;
    border-color: #374151 !important;
    border-top-color: #3b5598 !important;
    box-shadow:
        0 24px 50px -12px rgba(0, 0, 0, 0.6),
        0 8px 16px -4px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(59, 85, 152, 0.25) !important;
}
.ad-cite-pop-title {
    color: #243768 !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
html.dark .ad-cite-pop-title {
    color: #93b0e8 !important;
}

/* --- Lista de referencias bibliográficas: tipografía más pequeña.
   Especificidad alta para vencer a .edition p { font-size: 1rem !important } --- */
.edition ol.article-references,
.edition ol.article-references *,
.edition ol.article-references li,
.edition ol.article-references p {
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
}

/* --- Numeración personalizada: círculo relleno con el número en blanco.
   Sustituye el marker decimal nativo. --- */
.edition ol.article-references {
    list-style: none !important;
    counter-reset: ad-ref !important;
    padding-left: 0 !important;
}
.edition ol.article-references > li {
    counter-increment: ad-ref;
    display: block !important;
}
.edition ol.article-references > li::before {
    content: counter(ad-ref);
    position: absolute;
    left: 6px;
    top: 3px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #243768;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.62rem;
    line-height: 1;
    border-radius: 9999px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
html.dark .edition ol.article-references > li::before {
    background-color: #93b0e8;
    color: #0b1220;
}

/* --- Botón "Ir a la cita": no debe ocupar espacio cuando está oculto.
   Se posiciona absolutamente respecto a su <li> para que no rompa
   la alineación uniforme de las referencias. Reservamos espacio a la
   derecha del <li> para que el texto no quede tapado por el botón. --- */
.edition ol.article-references > li {
    position: relative;
    padding-right: 96px;
    padding-left: 32px;
    margin-left: 0;
    border-radius: 6px;
    transition: background-color .18s ease, box-shadow .18s ease;
}
.edition ol.article-references > li.ad-ref-clickable {
    cursor: pointer;
}
.edition ol.article-references > li.ad-ref-clickable:focus-visible {
    outline: 2px solid #243768;
    outline-offset: 2px;
}
.edition ol.article-references > li:hover {
    background-color: rgba(36, 55, 104, 0.06);
    box-shadow: inset 3px 0 0 0 #243768;
}
html.dark .edition ol.article-references > li:hover {
    background-color: rgba(147, 176, 232, 0.10);
    box-shadow: inset 3px 0 0 0 #93b0e8;
}
.edition ol.article-references > li > .ad-ref-back {
    position: absolute !important;
    top: 2px;
    right: 0;
    margin-left: 0 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    z-index: 2;
}
.edition ol.article-references > li:hover > .ad-ref-back,
.edition ol.article-references > li.ad-ref-show-back > .ad-ref-back {
    opacity: 1;
    pointer-events: auto;
}

/* En móvil ocultamos el botón "Ir a la cita" y eliminamos el espacio
   reservado a la derecha del <li>, ya que no hay :hover y el botón
   no aporta valor en pantallas pequeñas (UX). */
@media (max-width: 767px) {
    .edition ol.article-references > li {
        padding-right: 8px;
    }
    .edition ol.article-references > li > .ad-ref-back {
        display: none !important;
    }
}

/* --- Citas en el cuerpo del artículo: estilo "píldora" sutil
   para indicar interactividad sin saturar la lectura. --- */
.edition .ad-cite {
    color: #243768 !important;
    background-color: rgba(36, 55, 104, .06) !important;
    border-radius: 3px !important;
    padding: 0 4px !important;
    cursor: pointer !important;
    transition: background-color .18s ease, color .18s ease;
}
.edition .ad-cite:hover,
.edition .ad-cite:focus,
.edition .ad-cite.ad-cite-active {
    background-color: rgba(36, 55, 104, .16) !important;
    color: #1a2950 !important;
    outline: none;
}
html.dark .edition .ad-cite {
    color: #93b0e8 !important;
    background-color: rgba(147, 176, 232, .10) !important;
}
html.dark .edition .ad-cite:hover,
html.dark .edition .ad-cite:focus,
html.dark .edition .ad-cite.ad-cite-active {
    color: #c7d8f5 !important;
    background-color: rgba(147, 176, 232, .22) !important;
}

/* Si una citación queda dentro de un encabezado (h1-h6), no debe heredar
   el tamaño/peso del título: se reduce al tamaño del texto base para que
   no resalte de forma desproporcionada respecto al título. */
.edition :is(h1, h2, h3, h4, h5, h6) .ad-cite {
    font-size: 1rem !important;
    font-weight: 400 !important;
    vertical-align: middle;
}

/* --- Inline tags y listas en el contenido del artículo --- */
.edition i,
.edition em { font-style: italic; }
.edition sup { font-size: 0.8em; vertical-align: super; }
.edition sub { font-size: 0.8em; vertical-align: sub; }

/* Override Tailwind Preflight list-style reset */
.edition ol { list-style-type: decimal !important; padding-left: 1.5rem !important; }
.edition ol > li { display: list-item !important; }
.edition ul { list-style-type: disc !important; padding-left: 1.5rem !important; }
.edition ul > li { display: list-item !important; }