/* ══════════════════════════════════════════════════════════════════
   RWA On-Air Ticker — barra de programa en vivo
   Se muestra debajo del menú cuando hay un programa en el aire.
   ══════════════════════════════════════════════════════════════════ */

/* ── Banda contenedora ── */
.rwa-onair {
	background: #0d0d1e;
	border-top: 1px solid rgba(255,255,255,.07);
	padding: 7px 0;
	font-family: var(--rwa-font-primary, Montserrat, sans-serif);
}

.rwa-onair__inner {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 46px;
	flex-wrap: nowrap;
	overflow: hidden;
}

/* ── Badge "EN VIVO" ── */
.rwa-onair__badge {
	display: flex;
	align-items: center;
	gap: 7px;
	background: var(--rwa-primary, #cc0000);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	padding: 5px 13px 5px 10px;
	border-radius: 50px;
	white-space: nowrap;
	flex-shrink: 0;
	line-height: 1;
}

/* Badge variante "PRÓXIMO" */
.rwa-onair__badge--next {
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.2);
	color: rgba(255,255,255,.8);
}

body.rwa-light-mode .rwa-onair__badge--next {
	background: rgba(0,0,0,.07);
	border-color: rgba(0,0,0,.12);
	color: rgba(0,0,0,.6);
}

/* Punto pulsante rojo */
.rwa-onair__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	flex-shrink: 0;
	animation: rwa-onair-blink 1.3s ease-in-out infinite;
}

@keyframes rwa-onair-blink {
	0%, 100% { opacity: 1;  transform: scale(1); }
	50%       { opacity: .3; transform: scale(.55); }
}

/* ── Thumbnail del programa ── */
.rwa-onair__thumb {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 8px;
	overflow: hidden;
	border: 2px solid rgba(255,255,255,.13);
	box-shadow: 0 2px 10px rgba(0,0,0,.4);
}

.rwa-onair__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── Información: nombre + horario ── */
.rwa-onair__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex-shrink: 0;
}

.rwa-onair__name {
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 260px;
	display: block;
}

.rwa-onair__sched {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 500;
	color: rgba(255,255,255,.5);
	white-space: nowrap;
}

.rwa-onair__sched svg {
	flex-shrink: 0;
	opacity: .6;
}

/* ── Separador vertical ── */
.rwa-onair__sep {
	width: 1px;
	height: 28px;
	background: rgba(255,255,255,.13);
	flex-shrink: 0;
}

/* ── Descripción corta (solo escritorio) ── */
.rwa-onair__desc {
	font-size: 12px;
	color: rgba(255,255,255,.45);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
	min-width: 0;
	display: none;
}

@media (min-width: 768px) {
	.rwa-onair__desc { display: block; }
}

/* ── Etiqueta "Próximo" (programa siguiente) ── */
.rwa-onair__next {
	display: none;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: rgba(255,255,255,.45);
	white-space: nowrap;
	flex-shrink: 0;
	margin-left: auto;
}

.rwa-onair__next-label {
	font-weight: 600;
	font-size: 10px;
	letter-spacing: .8px;
	text-transform: uppercase;
	opacity: .55;
}

.rwa-onair__next-name {
	color: rgba(255,255,255,.7);
	font-weight: 600;
}

@media (min-width: 1024px) {
	.rwa-onair__next { display: flex; }
}

/* ── Modo claro ── */
body.rwa-light-mode .rwa-onair {
	background: #f4f4f8;
	border-top: 1px solid rgba(0,0,0,.07);
}

body.rwa-light-mode .rwa-onair__name {
	color: #1a1a2e;
}

body.rwa-light-mode .rwa-onair__sched,
body.rwa-light-mode .rwa-onair__desc,
body.rwa-light-mode .rwa-onair__next {
	color: rgba(0,0,0,.5);
}

body.rwa-light-mode .rwa-onair__sep {
	background: rgba(0,0,0,.13);
}

body.rwa-light-mode .rwa-onair__thumb {
	border-color: rgba(0,0,0,.1);
}

/* ── Ocultar cuando el header está sticky ── */
.rwa-header-wave.is-sticky .rwa-onair,
.rwa-header--sticky.is-sticky .rwa-onair {
	display: none;
}

/* ── Responsive ── */
@media (max-width: 600px) {
	.rwa-onair__inner {
		gap: 10px;
	}
	.rwa-onair__name {
		max-width: 150px;
	}
}