/*
 * SIC Media — video y audio en la noticia.
 *
 * Este archivo es IDÉNTICO en todos los sitios de SICOMMER. La marca entra por
 * las variables --sic-media-*, que cada tema hijo define en su archivo de
 * tokens (ecn-brand-tokens.css, op-brand-tokens.css). Los valores literales de
 * var() son solo red de seguridad por si el plugin se activa antes que el tema:
 * nunca son la identidad de nadie.
 *
 * El espaciado NO se toma de tokens a propósito: el ritmo de esta pieza es el
 * mismo en los dos medios, y una variable por margen solo añade ceremonia.
 */

.sic-media {
	margin: 1.5rem 0;
}

/* ------------------------------------------------------------------ Video */

/* El lienzo es la caja oscura del video. El aviso y el pie viven fuera de él:
   si estuvieran dentro, quedarían texto gris sobre oscuro y recortados por el
   overflow que redondea las esquinas. */
.sic-media__lienzo {
	position: relative;
	overflow: hidden;
	border-radius: var(--sic-media-radio, 12px);
	background: var(--sic-media-lienzo, #0a0a0d);
	line-height: 0;
}

.sic-media__caratula,
.sic-media__marco,
.sic-media__video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

.sic-media__caratula {
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 0;
	background: none;
	cursor: pointer;
}

.sic-media__miniatura {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* La carátula se oscurece para que el play y el rótulo tengan contraste
	   sobre cualquier foto, incluidas las de fondo claro. */
	filter: brightness(0.78);
	transition: filter 0.2s ease, transform 0.4s ease;
}

.sic-media__miniatura--vacia {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--sic-media-superficie, #14161c);
}

.sic-media__caratula:hover .sic-media__miniatura,
.sic-media__caratula:focus-visible .sic-media__miniatura {
	filter: brightness(0.62);
	transform: scale(1.02);
}

.sic-media__caratula:focus-visible {
	outline: 2px solid var(--sic-media-acento-vivo, #ff2e3b);
	outline-offset: -4px;
}

.sic-media__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 74px;
	height: 74px;
	transform: translate(-50%, -50%);
	border-radius: 999px;
	background: var(--sic-media-acento, #d0202a);
	box-shadow: var(--sic-media-halo, 0 6px 24px rgba(0, 0, 0, 0.35));
	transition: transform 0.2s ease, background 0.2s ease;
}

/* El triángulo de play, dibujado con bordes: sin imagen ni icono externo. */
.sic-media__play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 13px 0 13px 21px;
	border-color: transparent transparent transparent var(--sic-media-acento-texto, #fff);
}

.sic-media__caratula:hover .sic-media__play,
.sic-media__caratula:focus-visible .sic-media__play {
	transform: translate(-50%, -50%) scale(1.08);
	background: var(--sic-media-acento-vivo, #ff2e3b);
}

.sic-media__rotulo {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background: rgba(10, 10, 13, 0.72);
	color: #fff;
	font-family: var(--sic-media-fuente-cuerpo, inherit);
	font-size: var(--sic-media-fs-xs, 0.75rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.6;
	text-transform: uppercase;
}

.sic-media__aviso {
	margin: 0.5rem 0 0;
	color: var(--sic-media-muted, #6b7280);
	font-family: var(--sic-media-fuente-cuerpo, inherit);
	font-size: var(--sic-media-fs-xs, 0.75rem);
	line-height: 1.5;
}

.sic-media__pie {
	margin: 0.5rem 0 0;
	color: var(--sic-media-muted, #6b7280);
	font-family: var(--sic-media-fuente-cuerpo, inherit);
	font-size: var(--sic-media-fs-sm, 0.875rem);
	line-height: 1.5;
}

/* ------------------------------------------------------------------ Audio */

.sic-media--audio {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	border: 1px solid var(--sic-media-borde, rgba(255, 255, 255, 0.14));
	border-radius: var(--sic-media-radio, 12px);
	background: var(--sic-media-superficie, #14161c);
	color: var(--sic-media-superficie-texto, #fff);
}

.sic-audio__play {
	position: relative;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--sic-media-acento, #d0202a);
	cursor: pointer;
	transition: background 0.2s ease;
}

.sic-audio__play:hover,
.sic-audio__play:focus-visible {
	background: var(--sic-media-acento-vivo, #ff2e3b);
}

.sic-audio__play:focus-visible {
	outline: 2px solid var(--sic-media-superficie-texto, #fff);
	outline-offset: 2px;
}

.sic-audio__icono {
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent var(--sic-media-acento-texto, #fff);
}

/* Sonando: el triángulo se convierte en las dos barras de pausa. */
.sic-media--audio.is-sonando .sic-audio__icono {
	left: 50%;
	width: 12px;
	height: 15px;
	border: 0;
	background: linear-gradient(
		90deg,
		var(--sic-media-acento-texto, #fff) 0 4px,
		transparent 4px 8px,
		var(--sic-media-acento-texto, #fff) 8px 12px
	);
}

.sic-audio__cuerpo {
	flex: 1 1 auto;
	min-width: 0;
}

.sic-audio__etiqueta {
	margin: 0 0 0.5rem;
	color: var(--sic-media-superficie-texto, #fff);
	font-family: var(--sic-media-fuente-titular, inherit);
	font-size: var(--sic-media-fs-sm, 0.875rem);
	font-weight: 700;
	line-height: 1.3;
}

.sic-audio__barra {
	display: block;
	width: 100%;
	height: 6px;
	margin: 0;
	padding: 0;
	border-radius: 999px;
	background: var(--sic-media-pista, rgba(255, 255, 255, 0.16));
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.sic-audio__barra:disabled {
	cursor: default;
	opacity: 0.5;
}

.sic-audio__barra::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 14px;
	height: 14px;
	border: 0;
	border-radius: 999px;
	background: var(--sic-media-acento-vivo, #ff2e3b);
	cursor: pointer;
}

.sic-audio__barra::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: 0;
	border-radius: 999px;
	background: var(--sic-media-acento-vivo, #ff2e3b);
	cursor: pointer;
}

.sic-audio__barra:focus-visible {
	outline: 2px solid var(--sic-media-acento-vivo, #ff2e3b);
	outline-offset: 3px;
}

.sic-audio__tiempo {
	flex: 0 0 auto;
	margin: 0;
	color: var(--sic-media-superficie-tenue, rgba(255, 255, 255, 0.72));
	font-family: var(--sic-media-fuente-cuerpo, inherit);
	font-size: var(--sic-media-fs-xs, 0.75rem);
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
	text-align: right;
}

.sic-audio__total {
	display: block;
	opacity: 0.7;
}

.sic-audio__total:empty {
	display: none;
}

@media (max-width: 480px) {
	.sic-media--audio {
		gap: 0.75rem;
		padding: 0.75rem;
	}

	.sic-media__play {
		width: 58px;
		height: 58px;
	}

	.sic-media__play::before {
		border-width: 10px 0 10px 16px;
	}
}

/* ------------------------------------------ Distintivo en portada y archivos */

.sic-tiene-video .post-thumb,
.sic-tiene-audio .post-thumb,
.sic-tiene-video .post-img,
.sic-tiene-audio .post-img {
	position: relative;
}

.sic-tiene-video .post-thumb::after,
.sic-tiene-video .post-img::after,
.sic-tiene-audio .post-thumb::after,
.sic-tiene-audio .post-img::after {
	content: "";
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 2;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background-color: rgba(10, 10, 13, 0.78);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 13px 13px;
	box-shadow: 0 0 0 1px var(--sic-media-acento, #d0202a);
	pointer-events: none;
}

/* Triángulo de play para video. */
.sic-tiene-video .post-thumb::after,
.sic-tiene-video .post-img::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M3 1.5v13l11-6.5z'/%3E%3C/svg%3E");
}

/* Ondas de sonido para audio. Si la nota tiene las dos, manda el video. */
.sic-tiene-audio:not(.sic-tiene-video) .post-thumb::after,
.sic-tiene-audio:not(.sic-tiene-video) .post-img::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Crect x='1' y='6' width='2' height='4' rx='1'/%3E%3Crect x='5' y='3' width='2' height='10' rx='1'/%3E%3Crect x='9' y='5' width='2' height='6' rx='1'/%3E%3Crect x='13' y='7' width='2' height='2' rx='1'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
	.sic-media__miniatura,
	.sic-media__play,
	.sic-audio__play {
		transition: none;
	}

	.sic-media__caratula:hover .sic-media__miniatura {
		transform: none;
	}
}

/* ----------------------------------------------- Publicación de red social */

/* Aquí no hay carátula: la publicación se ve entera desde que carga la nota,
   como un pantallazo. El ancho lo fija el PHP por red, en --sic-social-ancho. */
.sic-media--social {
	max-width: var(--sic-social-ancho, 540px);
	margin-right: auto;
	margin-left: auto;
}

.sic-social__marco {
	display: block;
	width: 100%;
	border: 0;
	border-radius: var(--sic-media-radio, 12px);
	background: var(--sic-media-superficie, #14161c);
	/* La altura la pone el PHP en línea y, en Instagram, la corrige el JS con
	   la medida que publica la propia red. La transición evita el salto seco. */
	transition: height 0.25s ease;
	overflow: hidden;
}

.sic-media--social .sic-media__aviso {
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.sic-social__marco {
		transition: none;
	}
}