/*
 * ECN Radio — barra fija y ficha del reproductor.
 * Los colores salen de los tokens de marca del tema hijo; los valores de
 * respaldo son para el caso de que el CSS del tema no haya cargado todavía.
 */

.ecn-radio-bar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 9990;
	display: flex;
	align-items: center;
	gap: var( --ecn-sp-3, 0.75rem );
	padding: 0.5rem var( --ecn-sp-3, 0.75rem );
	min-height: 56px;
	background: var( --ecn-negro, #111111 );
	color: var( --ecn-blanco, #ffffff );
	font-family: var( --ecn-font-cuerpo, system-ui, sans-serif );
	box-shadow: 0 -2px 12px rgba( 0, 0, 0, 0.35 );
}

.ecn-radio-bar[hidden] {
	display: none;
}

body.has-ecn-radio-bar {
	padding-bottom: 56px;
}

/* Botón de reproducción */

.ecn-radio-toggle {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var( --ecn-rojo, #d0202a );
	color: var( --ecn-blanco, #ffffff );
	cursor: pointer;
}

.ecn-radio-toggle:focus-visible {
	outline: 2px solid var( --ecn-blanco, #ffffff );
	outline-offset: 2px;
}

/* Triángulo de play dibujado con bordes: sin imágenes ni iconos externos. */
.ecn-radio-icon {
	width: 0;
	height: 0;
	margin-left: 3px;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 13px solid currentColor;
}

.ecn-radio-toggle.is-playing .ecn-radio-icon {
	width: 12px;
	height: 14px;
	margin-left: 0;
	border: 0;
	border-left: 4px solid currentColor;
	border-right: 4px solid currentColor;
}

/* Indicador EN VIVO */

.ecn-radio-status {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex: 0 0 auto;
	font-size: var( --ecn-fs-xs, 0.75rem );
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ecn-radio-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var( --ecn-rojo, #d0202a );
	animation: ecn-radio-latido 2s ease-in-out infinite;
}

.ecn-radio-bar.is-offline .ecn-radio-dot,
.ecn-radio-panel .ecn-radio-dot {
	animation: none;
}

.ecn-radio-bar.is-offline .ecn-radio-dot {
	background: var( --ecn-gris, #6B7280 );
}

@keyframes ecn-radio-latido {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

@media ( prefers-reduced-motion: reduce ) {
	.ecn-radio-dot {
		animation: none;
	}
}

/* Textos */

.ecn-radio-meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
	line-height: 1.25;
}

.ecn-radio-station {
	font-size: var( --ecn-fs-sm, 0.875rem );
	font-weight: 700;
}

.ecn-radio-now {
	font-size: var( --ecn-fs-xs, 0.75rem );
	color: rgba( 255, 255, 255, 0.72 );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ecn-radio-link {
	flex: 0 0 auto;
	color: var( --ecn-blanco, #ffffff );
	font-size: var( --ecn-fs-xs, 0.75rem );
	text-decoration: underline;
}

.ecn-radio-dismiss {
	flex: 0 0 auto;
	padding: 0 0.25rem;
	border: 0;
	background: none;
	color: rgba( 255, 255, 255, 0.6 );
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}

.ecn-radio-dismiss:hover {
	color: var( --ecn-blanco, #ffffff );
}

@media ( max-width: 600px ) {
	.ecn-radio-link {
		display: none;
	}
}

/* Ficha del shortcode [ecn_radio] */

.ecn-radio-panel {
	display: flex;
	align-items: center;
	gap: var( --ecn-sp-4, 1rem );
	padding: var( --ecn-sp-4, 1rem );
	background: var( --ecn-negro, #111111 );
	color: var( --ecn-blanco, #ffffff );
	border-radius: var( --ecn-radio-borde, 4px );
}

.ecn-radio-toggle--grande {
	width: 64px;
	height: 64px;
}

.ecn-radio-toggle--grande .ecn-radio-icon {
	border-top-width: 12px;
	border-bottom-width: 12px;
	border-left-width: 20px;
}

.ecn-radio-toggle--grande.is-playing .ecn-radio-icon {
	width: 18px;
	height: 22px;
	border-left-width: 6px;
	border-right-width: 6px;
}

.ecn-radio-panel-texto {
	min-width: 0;
}

.ecn-radio-panel-kicker {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 0.25rem;
	font-size: var( --ecn-fs-xs, 0.75rem );
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --ecn-rojo, #d0202a );
}

.ecn-radio-panel-titulo {
	margin: 0;
	font-family: var( --ecn-font-titular, inherit );
	font-size: var( --ecn-fs-xl, 1.5rem );
	color: var( --ecn-blanco, #ffffff );
}

.ecn-radio-panel-desc,
.ecn-radio-panel-now {
	margin: 0.25rem 0 0;
	font-size: var( --ecn-fs-sm, 0.875rem );
	color: rgba( 255, 255, 255, 0.72 );
}

/*
 * Navegación sin recarga: línea de progreso mientras llega la página nueva.
 * Sin esta señal, un clic parece que no hizo nada durante medio segundo.
 */

body.ecn-nav-cargando::before {
	content: "";
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 9995;
	height: 3px;
	background: var( --ecn-rojo, #d0202a );
	transform-origin: 0 50%;
	animation: ecn-nav-progreso 1.2s ease-out forwards;
}

@keyframes ecn-nav-progreso {
	0% { transform: scaleX( 0 ); }
	60% { transform: scaleX( 0.75 ); }
	100% { transform: scaleX( 0.96 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	body.ecn-nav-cargando::before {
		animation: none;
		transform: scaleX( 1 );
		opacity: 0.7;
	}
}

/*
 * Botón al que se pliega la barra. Es la única vía de vuelta, así que tiene
 * que verse siempre: nunca se oculta en móvil ni se solapa con el contenido.
 */

.ecn-radio-launcher {
	position: fixed;
	right: var( --ecn-sp-3, 0.75rem );
	bottom: var( --ecn-sp-3, 0.75rem );
	z-index: 9991;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.85rem;
	border: 0;
	border-radius: 999px;
	background: var( --ecn-negro, #111111 );
	color: var( --ecn-blanco, #ffffff );
	font-family: var( --ecn-font-cuerpo, system-ui, sans-serif );
	font-size: var( --ecn-fs-xs, 0.75rem );
	font-weight: 700;
	letter-spacing: 0.08em;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.35 );
}

.ecn-radio-launcher[hidden] {
	display: none;
}

.ecn-radio-launcher:hover {
	background: var( --ecn-rojo, #d0202a );
}

.ecn-radio-launcher:focus-visible {
	outline: 2px solid var( --ecn-rojo, #d0202a );
	outline-offset: 2px;
}

/* Cuando está sonando, el punto late: se distingue de un botón cualquiera. */
.ecn-radio-launcher .ecn-radio-dot {
	animation: none;
}

.ecn-radio-launcher.is-playing .ecn-radio-dot {
	animation: ecn-radio-latido 2s ease-in-out infinite;
}

@media ( prefers-reduced-motion: reduce ) {
	.ecn-radio-launcher.is-playing .ecn-radio-dot {
		animation: none;
	}
}