/**
 * Nota individual: cabecera editorial, medios por formato y lectura.
 *
 * Reglas de DESIGN-SYSTEM.md: valores via tokens (--ee-* / --wp--preset--*),
 * solo constantes de layout: breakpoints en em y bordes hairline.
 */

/* --- Cabecera editorial --- */

/* V9.3: background !important eliminado — chrome.css ya cubre .ee-article en su
 * grupo de superficies (auditoría V9.1bis N3 — regla redundante). */
.ee-article {
	margin: 0;
}

.ee-article__head {
	padding-top: var(--ee-space-6);
	padding-bottom: var(--ee-space-6);
	border-bottom: none;
}

.ee-article__head .ee-container {
	max-width: var(--ee-layout-content);
}

/* Kicker: categoria + badge de cobertura en linea. */
.ee-article__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ee-space-3);
	margin-bottom: var(--ee-space-5);
}

.ee-article__cat {
	color: var(--ee-color-text-muted);
	font-family: var(--ee-font-sans);
	font-size: var(--ee-font-label);
	font-weight: 500;
	line-height: var(--ee-line-height-label);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ee-article__cat:hover {
	color: var(--ee-color-link-dark, var(--ee-color-link));
}

/* Badge de cobertura especial ("A fondo"): chip neutro con borde hairline.
 * Fondo rojo solo en hover. */
.ee-badge {
	display: inline-block;
	padding: var(--ee-space-1) var(--ee-space-3);
	background: var(--ee-color-surface);
	border: 1px solid var(--ee-color-border);
	border-radius: var(--ee-radius-pill);
	color: var(--ee-color-text-muted);
	font-family: var(--ee-font-sans);
	font-size: var(--ee-font-label);
	font-weight: 500;
	line-height: var(--ee-line-height-label);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ee-badge:hover {
	background: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--surface);
}

@media (prefers-color-scheme: dark) {
	.ee-badge {
		color: var(--ee-color-text-muted);
		border-color: var(--ee-color-border);
	}

	.ee-badge:hover {
		background: var(--ee-color-link);
		color: var(--wp--preset--color--brand-secondary);
	}
}

/* Titulo: escala editorial, ancho de lectura optimo. */
.ee-article__title {
	margin: 0;
	max-width: 18em;
	color: var(--ee-color-text);
	font-size: var(--ee-font-headline);
	font-weight: var(--ee-font-weight-headline);
	line-height: var(--ee-line-height-headline);
	letter-spacing: -0.01em;
}

/* Bajada / lead: sans, muted, ancho de lectura. */
.ee-article__lead {
	margin: var(--ee-space-5) 0 0;
	max-width: 35em;
	color: var(--ee-color-text-muted);
	font-size: var(--ee-font-lead);
	font-weight: 400;
	line-height: var(--ee-line-height-lead);
}

/* Meta: autor con link, fecha y formato. */
.ee-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ee-space-2);
	margin-top: var(--ee-space-6);
	font-family: var(--ee-font-sans);
	font-size: var(--ee-font-metadata);
	line-height: var(--ee-line-height-metadata);
}

.ee-article__byline {
	color: var(--ee-color-text);
}

.ee-article__author {
	color: var(--ee-color-text);
	font-weight: 500;
}

.ee-article__author:hover {
	color: var(--ee-color-link);
}

.ee-article__date {
	color: var(--ee-color-text-muted);
}

.ee-article__dot {
	width: 3px;
	height: 3px;
	background: var(--ee-color-text-muted);
	border-radius: var(--ee-radius-full);
}

.ee-article__format-label {
	color: var(--ee-color-text-muted);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* Icono de play: acompana las etiquetas Video / Video y reportaje. */
.ee-article__format-label::before {
	content: "";
	display: inline-block;
	margin-right: 0.45em;
	width: 0;
	height: 0;
	border-left: 0.5em solid currentColor;
	border-top: 0.3em solid transparent;
	border-bottom: 0.3em solid transparent;
	vertical-align: middle;
}

/* --- Medios --- */

/* B15.5: el parent Astra inyecta box-shadow en .ast-article-single figure/img
 * (0 0 30px rgba(0,0,0,.15)). Se neutraliza para toda imagen/figure de la
 * entrada: las imágenes van sin elevación (decisión de diseño, hairlines y
 * gap como únicos recursos). Doble clase para ganar especificidad al CSS
 * dinámico inline de Astra (misma especificidad base, orden no garantizado). */
.ee-article.ee-article img,
.ee-article.ee-article figure,
.ee-article .wp-block-image img {
	box-shadow: none;
	-webkit-box-shadow: none;
}

.ee-article__media {
	padding-top: var(--ee-space-6);
	padding-bottom: var(--ee-space-6);
	border-bottom: 0/*1px solid var(--ee-color-border)*/;
}

.ee-article__media .ee-container {
	width: 100%;
}

/* Relacion 16:9 para imagen estandar y video. */
.ee-media__figure {
	margin: 0;
}

.ee-media__img {
	display: block;
	width: 100%;
	height: auto;
}

.ee-media__caption {
	margin-top: var(--ee-space-2);
	color: var(--ee-color-text-muted);
	font-family: var(--ee-font-sans);
	font-size: var(--ee-font-caption);
	line-height: var(--ee-line-height-caption);
}

/* Video: wrapper 16:9 con embed absoluto (iframe de oEmbed). */
.ee-media__ratio {
	position: relative;
	overflow: hidden;
	background: var(--ee-color-brand-secondary);
	aspect-ratio: 16 / 9;
}

.ee-media__ratio iframe,
.ee-media__ratio embed,
.ee-media__ratio video,
.ee-media__ratio object {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Mixto: video (2/3) + imagen (1/3) en una fila balanceada. */
.ee-media--mixed {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: var(--ee-space-4);
}

.ee-media--mixed .ee-media__ratio {
	aspect-ratio: 16 / 10;
}

.ee-media--mixed .ee-media__figure {
	align-self: start;
}

.ee-media--mixed .ee-media__img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* --- Cuerpo: ancho de lectura optimo (60-75 caracteres por linea) --- */

.ee-prose {
	max-width: var(--ee-content-width);
	margin-inline: auto;
	padding-top: var(--ee-space-7);
	padding-bottom: var(--ee-space-8);
}

/* Tipografia de lectura: sans, interlineado editorial. */
.ee-prose {
	color: var(--ee-color-text);
	font-family: var(--ee-font-heading);
	font-size: var(--ee-font-body);
	line-height: var(--ee-line-height-body);
}

.ee-prose p {
	margin: 0 0 var(--ee-space-5);
}

.ee-prose p:last-child {
	margin-bottom: 0;
}

.ee-prose h2,
.ee-prose h3,
.ee-prose h4,
.ee-prose h5,
.ee-prose h6 {
	margin: var(--ee-space-7) 0 var(--ee-space-4);
	font-family: var(--ee-font-heading);
	font-weight: var(--ee-font-weight-h2);
	line-height: var(--ee-line-height-h2);
}

.ee-prose h2 {
	font-size: var(--ee-font-h2);
}

.ee-prose h3 {
	font-size: var(--ee-font-h3);
}

/* Links del cuerpo: subrayado siempre visible + color del parrafo.
 * El rojo de marca queda solo en hover; :focus-visible conserva outline
 * propio para navegacion por teclado. */
.ee-prose a {
	color: var(--ee-color-link-rest, var(--ee-color-text));
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ee-prose a:hover {
	color: var(--ee-color-link);
}

.ee-prose ul,
.ee-prose ol {
	margin: 0 0 var(--ee-space-5);
	padding-left: var(--ee-space-5);
}

.ee-prose li {
	margin-bottom: var(--ee-space-2);
}

.ee-prose blockquote {
	margin: var(--ee-space-7) 0;
	padding: var(--ee-space-3) 0 var(--ee-space-3) var(--ee-space-5);
	border-left: 3px solid var(--ee-color-border);
	color: var(--ee-color-text);
	font-size: var(--ee-font-lead);
	font-style: italic;
	line-height: var(--ee-line-height-lead);
}

.ee-prose img,
.ee-prose .wp-block-image img {
	max-width: 100%;
	height: auto;
}

.ee-prose figure {
	margin: var(--ee-space-6) 0;
}

.ee-prose figcaption {
	margin-top: var(--ee-space-2);
	color: var(--ee-color-text-muted);
	font-family: var(--ee-font-sans);
	font-size: var(--ee-font-caption);
	line-height: var(--ee-line-height-caption);
}

/* B15.5: tags al cierre del cuerpo (solo single). Chips de texto muted con
 * link que pasa a color de enlace en hover — sin cajas ni bordes. */
.ee-tags {
	margin: var(--ee-space-6) 0 0;
	color: var(--ee-color-text-muted);
	font-family: var(--ee-font-sans);
	font-size: var(--ee-font-label);
	line-height: var(--ee-line-height-label);
}

.ee-tags__label {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-right: var(--ee-space-2);
}

.ee-tags a {
	color: var(--ee-color-text-muted);
	text-decoration: none;
}

.ee-tags a:hover {
	color: var(--ee-color-link);
	text-decoration: underline;
}

/* --- Layout Single con Sidebar (V6.3 Medium, dentro de .ee-container) --- */
/* Sidebar vive DENTRO de .ee-container.ee-single__layout (grid 1fr 320px) dentro de <main id="ee-single">,
   NO como hermano de .ast-container — evita bug footer-columna (R9) donde footer quedó como 2º flex-item de .ast-container. */
.ee-single__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) calc(var(--ee-space-8) * 5);
	gap: var(--ee-space-6);
	align-items: start;
}

.ee-single__main {
	min-width: 0;
}

.ee-single__main .ee-prose {
	margin-inline: 0;
}

.ee-single__main .ee-share {
	margin-top: var(--ee-space-6);
}

/* B17.3: .ee-sidebar es contenedor de flujo normal (ocupa toda la altura
 * de la fila del grid). El sticky vive en .ee-sidebar__ads para que solo
 * el bloque de publicidad acompañe el scroll; la lista scrollea normal. */
.ee-sidebar {
	align-self: stretch;
	min-width: 0;
}

.ee-sidebar__latest {
	min-width: 0;
}

.ee-sidebar__ads {
	position: -webkit-sticky; /* Safari legacy */
	position: sticky;
	/* B15.5: offset por debajo del masthead (token de altura del header). */
	top: var(--ee-header-height, var(--ee-space-6));
	z-index: 10;
	margin-top: var(--ee-space-5);
}

.ee-sidebar__title {
	margin: 0 0 var(--ee-space-4);
	font-family: var(--ee-font-sans);
	font-size: var(--ee-font-h3);
	font-weight: var(--ee-font-weight-h2);
	line-height: var(--ee-line-height-h3);
	color: var(--ee-color-text);
	padding-bottom: var(--ee-space-3);
	border-bottom: 1px solid var(--ee-color-border);
}

.ee-sidebar__list {
	display: flex;
	flex-direction: column;
	gap: var(--ee-space-1);
}

.ee-sidebar__list.ee-sidebar--latest article {
	padding: var(--ee-space-1);
}

/* V.7.11.3 — Override scoped para sidebar "Últimas noticias" sin pelear con token global.
 * Global: chrome.css:547 .ast-separate-container .ast-article-post
 * { padding: var(--ee-card-padding) !important; } (0,2,0 !important, 1.5em ≈24px)
 * pensado para tarjetas con imagen (relacionadas md, grilla, author). Sidebar usa
 * ee-card--sm compacto (thumb 64px + label) y necesita padding mínimo. Solución
 * replica V.7.10: mismo !important pero scoped a .ee-sidebar (0,3,0 + 1,1,1 con
 * #ee-single) y orden posterior single.css > chrome.css, solo sidebar baja a
 * var(--ee-space-2) 8px; relacionadas mantienen 1.5em. Token en escala existente. */
.ee-sidebar .ast-separate-container .ast-article-post,
.ee-sidebar .wp-block-post,
#ee-single .ee-sidebar .ee-card--sidebar,
.ee-sidebar .ee-card--sidebar {
	padding: var(--ee-space-2) !important;
}

.ee-sidebar .ee-card--sidebar {
	display: flex;
	flex-direction: row;
	gap: var(--ee-space-3);
	align-items: flex-start;
	padding-bottom: var(--ee-space-3);
	border-bottom: 1px solid var(--ee-color-border);
}

.ee-sidebar .ee-card--sidebar:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.ee-sidebar .ee-card__thumb--sidebar {
	flex: 0 0 var(--ee-space-8);
	width: var(--ee-space-8);
	height: var(--ee-space-8);
	overflow: hidden;
	background: var(--ee-color-surface);
	border: 1px solid var(--ee-color-border);
}

.ee-sidebar .ee-card__thumb--sidebar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ee-sidebar .ee-card--sidebar .ee-card__body {
	flex: 1;
	min-width: 0;
	gap: var(--ee-space-1);
	padding-top: 0;
}

.ee-sidebar .ee-card--sidebar .ee-card__title {
	font-size: var(--ee-font-label);
	line-height: var(--ee-line-height-label);
	font-weight: 500;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ee-sidebar .ee-card--sidebar .ee-card__meta {
	font-size: var(--ee-font-caption);
	line-height: var(--ee-line-height-caption);
}

@media screen and (max-width: 64em) {
	.ee-single__layout {
		grid-template-columns: 1fr;
		/* Mobile-compact: la columna única no necesita el gap de la
		 * grilla desktop (space-6); space-3 alcanza entre bloques. */
		gap: var(--ee-space-3);
	}

	/* Mobile-compact: gutter lateral un escalón menor en single
	 * (space-4 de home.css/chrome.css → space-3). Orden posterior
	 * single.css > home.css/chrome.css define el ganador a igual
	 * especificidad (0,1,0); solo vistas de nota (este archivo
	 * carga únicamente en is_singular post). */
	.ee-container {
		padding-inline: var(--ee-space-3);
	}

	/* Mobile-compact: el cuerpo de lectura no necesita el aire
	 * editorial desktop (space-7/space-8) en una columna angosta. */
	.ee-prose {
		padding-top: var(--ee-space-3);
		padding-bottom: var(--ee-space-3);
	}

	/* Mobile-compact: compartir pegado al cuerpo en mobile
	 * (space-6 desktop → space-2); sin bloque mobile previo. */
	.ee-single__main .ee-share {
		margin-top: var(--ee-space-2);
	}

	.ee-sidebar {
		position: static;
		margin-top: var(--ee-space-3);
		padding-top: var(--ee-space-3);
		/* B15.5: sin línea divisoria entre contenido y sidebar apilada —
		 * la separación es exclusivamente espaciado (margin/padding). */
	}

	/* B17.3: sticky solo en desktop; en mobile el aviso queda en flujo. */
	.ee-sidebar__ads {
		position: static;
	}
}

/* --- Relacionadas --- */

.ee-section--related {
	padding-block: var(--ee-space-5);
	background: var(--ee-color-surface);
}

.ee-related__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ee-space-5) var(--ee-space-4);
}

.ee-related__card {
	margin: 0;
	min-width: 0;
}

/* --- Tablet (<=1024px) --- */

@media screen and (max-width: 64em) {
	.ee-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --- Mobile (<=600px) --- */

@media screen and (max-width: 37.5em) {
	.ee-article__head {
		padding-top: var(--ee-space-5);
		padding-bottom: var(--ee-space-5);
	}

	.ee-article__title {
		font-size: var(--ee-font-h1);
	}

	.ee-media--mixed {
		grid-template-columns: 1fr;
	}

	.ee-related__grid {
		grid-template-columns: 1fr;
	}
}

/* --- Motion (sutil, respeta prefers-reduced-motion) --- */

.ee-article__title,
.ee-media__ratio,
.ee-related .ee-card {
	animation: ee-fade-up 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ee-media__ratio {
	animation-delay: 0.12s;
}

.ee-related .ee-card:nth-child(1) {
	animation-delay: 0.05s;
}

.ee-related .ee-card:nth-child(2) {
	animation-delay: 0.15s;
}

.ee-related .ee-card:nth-child(3) {
	animation-delay: 0.25s;
}

@keyframes ee-fade-up {
	from {
		opacity: 0;
		transform: translateY(16px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ee-article__title,
	.ee-media__ratio,
	.ee-related .ee-card {
		animation: none;
	}
}

/* --- Compartir (nativo, tokens only) --- */

.ee-share {
	margin-top: var(--ee-space-7);
	padding-top: 0;
	/* B15.5: sin border-top — el bloque de compartir se separa del cuerpo
	 * exclusivamente con el margen superior (token), sin línea divisoria. */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ee-space-4);
}

.ee-share__label {
	font-family: var(--ee-font-sans);
	font-size: var(--ee-font-label);
	font-weight: 700;
	line-height: var(--ee-line-height-label);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ee-color-text-muted);
}

.ee-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ee-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ee-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ee-space-2);
	width: var(--ee-space-6);
	height: var(--ee-space-6);
	border-radius: var(--ee-radius-full);
	background: var(--ee-color-surface);
	color: var(--ee-color-text-muted);
	border: 1px solid var(--ee-color-border);
	text-decoration: none;
	transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.ee-share__link:hover {
	background: var(--ee-color-brand-primary);
	color: var(--wp--preset--color--surface);
	border-color: var(--ee-color-brand-primary);
}

.ee-share__link:focus-visible {
	outline: 2px solid var(--ee-color-link);
	outline-offset: 2px;
}

.ee-share__icon {
	width: var(--ee-space-4);
	height: var(--ee-space-4);
	fill: currentColor;
	flex-shrink: 0;
	font-size: var(--ee-space-4);
	line-height: 1;
}

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

.ee-share__link--copy.is-copied {
	background: var(--ee-color-link);
	color: var(--wp--preset--color--surface);
	border-color: var(--ee-color-link);
}

.ee-share__copy-msg {
	font-family: var(--ee-font-sans);
	font-size: var(--ee-font-caption);
	line-height: var(--ee-line-height-caption);
	color: var(--ee-color-text-muted);
}

@media (prefers-color-scheme: dark) {
	.ee-share__link {
		background: var(--ee-color-border);
		color: var(--ee-color-text-muted);
	}

.ee-share__link:hover,
.ee-share__link--copy.is-copied {
	background: var(--ee-color-brand-primary);
	color: var(--wp--preset--color--surface);
	border-color: var(--ee-color-brand-primary);
}

/* ===== Comentarios (override de Astra parent) ===== */
/* El parent (dynamic-css/comments.php) fija
 * .ast-separate-container .comment-respond (0,2,0) con padding hardcoded
 * 4em/6.67em (3em/2.34em en su @media ≤1200px). Sin regla propia, el form
 * hereda ese aire pensado para layout ancho dentro de nuestra columna de
 * lectura (620px). Override solo mobile (64em reutilizado, sin breakpoint
 * nuevo): #ee-single #respond.comment-respond (2,1,0) gana por anidación
 * con ids, sin !important. Desktop conserva el estilo Astra. */
@media screen and (max-width: 64em) {
	#ee-single #respond.comment-respond {
		padding: var(--ee-space-2);
	}
}