/* ==========================================================================
   CNM Radio Colombia — main.css
   Módulo 1: base + demostración funcional del sistema de colores dinámico.
   Todo color aquí referencia var(--cnm-*); nunca valores hex directos.
   ========================================================================== */

@import url('base/_variables-fallback.css');
@import url('base/_fonts.css');

/* --- Reset mínimo ------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--cnm-color-fondo);
	color: var(--cnm-color-texto);
	font-family: var(--cnm-fuente-texto);
	line-height: 1.55;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--cnm-color-enlaces);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover,
a:focus {
	color: var(--cnm-color-hover);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--cnm-fuente-titulos);
	color: var(--cnm-color-titulos);
	line-height: 1.2;
	margin: 0 0 0.5em;
}

/* --- Layout: fondo a pantalla completa + contenedor de ancho variable --- */
.cnm-site-bg {
	width: 100%;
	background-color: var(--cnm-color-fondo);
	background-size: cover;
	background-position: center;
}

.cnm-container {
	width: var(--cnm-ancho-contenido);
	max-width: 1400px;
	margin-inline: auto;
	padding-inline: 1rem;
}

/* --- Header --------------------------------------------------------------
   Punto 7 del brief: azul marino / profundo / eléctrico + blanco, con
   amarillo como acento puntual (ej. estado activo del menú). */
.cnm-header {
	background-color: var(--cnm-color-header);
	color: var(--cnm-blanco);
}

.cnm-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.75rem;
}

.cnm-header__logo img {
	max-height: var(--cnm-logo-alto, 48px);
	width: auto;
}

.cnm-nav__list {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cnm-header a {
	color: var(--cnm-blanco);
}

.cnm-header .cnm-nav a.is-active,
.cnm-header .cnm-nav a:hover {
	color: var(--cnm-color-dorado);
}

.cnm-header.is-sticky {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* --- Botones -------------------------------------------------------------
   Punto 8/13: botón de reproducción y CTAs usan el color de botones,
   con el dorado reservado para el estado "activo" / "al aire". */
.cnm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.65em 1.4em;
	border: none;
	border-radius: var(--cnm-border-radius);
	background-color: var(--cnm-color-botones);
	color: var(--cnm-blanco);
	font-family: var(--cnm-fuente-texto);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.cnm-btn:hover,
.cnm-btn:focus {
	background-color: var(--cnm-color-hover);
	color: var(--cnm-blanco);
	transform: translateY(-1px);
}

.cnm-btn--dorado {
	background-color: var(--cnm-color-dorado);
	color: var(--cnm-azul-marino);
}

.cnm-btn--dorado:hover {
	background-color: var(--cnm-amarillo);
	filter: brightness(0.95);
	color: var(--cnm-azul-marino);
}

/* --- Tarjetas (noticias, programas, locutores) --------------------------- */
.cnm-card {
	background-color: var(--cnm-blanco);
	border-radius: var(--cnm-border-radius);
	box-shadow: var(--cnm-sombra);
	overflow: hidden;
}

/* --- Indicador "EN VIVO" ---------------------------------------------------
   Punto 13: rojo reservado exclusivamente para este tipo de indicador. */
.cnm-badge-en-vivo {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.2em 0.7em;
	border-radius: 999px;
	background-color: var(--cnm-color-rojo);
	color: var(--cnm-blanco);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cnm-badge-en-vivo::before {
	content: '';
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background-color: currentColor;
	animation: cnm-pulse 1.4s ease-in-out infinite;
}

@keyframes cnm-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

/* --- Reproductor persistente --------------------------------------------
   Punto 8/9: estructura fija que nunca se destruye entre navegaciones
   PJAX (ver assets/js/core/pjax.js). Usa el color de reproductor
   (azul oscuro profundo por defecto) + dorado en el botón de play. */
.cnm-player-bar {
	background-color: var(--cnm-color-reproductor);
	color: var(--cnm-blanco);
}

.cnm-player-bar__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-block: 0.85rem;
	min-height: 72px;
}

.cnm-play-toggle {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--cnm-color-dorado);
	color: var(--cnm-azul-marino);
	border: none;
	border-radius: 50%;
	font-size: 1.1rem;
	cursor: pointer;
	transition: transform 0.15s ease, filter 0.15s ease;
}

.cnm-play-toggle:hover {
	transform: scale(1.05);
	filter: brightness(0.97);
}

.cnm-player-bar__cover {
	flex: 0 0 auto;
}

/* Cubre ambos casos: <img class="cnm-now-playing-cover"> (modo servidor,
   Módulo 3) y <div id="sonic_art" class="cnm-now-playing-cover"> (modo
   SonicPanel, que inserta su propio <img> dentro del div). */
img.cnm-now-playing-cover,
div.cnm-now-playing-cover {
	width: 56px;
	height: 56px;
	border-radius: 8px;
	object-fit: cover;
	background-color: rgba(251, 251, 251, 0.08);
	overflow: hidden;
}

div.cnm-now-playing-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

.cnm-player-bar__meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 0 1 240px;
}

.cnm-player-bar__station {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--cnm-color-dorado);
}

.cnm-now-playing-track {
	font-size: 0.9rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0; /* El modo SonicPanel usa un <div>, que trae margin por defecto. */
}

.cnm-player-bar__volume {
	flex: 0 0 auto;
	display: none; /* Se muestra desde min-width en el media query de abajo. */
}

.cnm-volume-slider {
	accent-color: var(--cnm-color-dorado);
}

.cnm-player-bar__warning {
	padding: 0.4rem 1rem;
	color: var(--cnm-gris-plata);
}

/* --- Espectro de audio ------------------------------------------------------
   Decorativo: son barras animadas por JS (assets/js/core/player.js), NO un
   análisis real de frecuencias del stream. Se optó por esto a propósito:
   un analizador Web Audio API real (AnalyserNode) requiere que el
   servidor de streaming envíe cabeceras CORS, algo que no todos los
   proveedores (SonicPanel incluido) garantizan, y arriesgar la
   reproducción de audio por un efecto visual no vale la pena. Solo
   visible en escritorio, tal como se pidió. */
.cnm-player-bar__visualizer {
	display: none;
	flex: 1 1 auto;
	align-items: flex-end;
	justify-content: center;
	gap: 3px;
	height: 32px;
	padding-inline: 1rem;
}

.cnm-player-bar__visualizer span {
	display: block;
	width: 4px;
	height: 15%;
	border-radius: 2px;
	background-color: var(--cnm-color-dorado);
	opacity: 0.85;
	transition: height 0.12s ease;
}

@media (min-width: 768px) {
	.cnm-player-bar__visualizer {
		display: flex;
	}
}

@media (min-width: 600px) {
	.cnm-player-bar__volume {
		display: block;
	}
}

/* --- Footer --------------------------------------------------------------- */
.cnm-footer {
	background-color: var(--cnm-color-footer);
	color: var(--cnm-gris-plata);
}

.cnm-footer__inner {
	padding-block: 2.5rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.cnm-footer__logo img {
	max-height: var(--cnm-logo-alto, 48px);
	width: auto;
}

.cnm-footer__nav ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
}

.cnm-footer__copy {
	margin: 0;
	font-size: 0.85rem;
	color: var(--cnm-gris-plata);
}

.cnm-footer a {
	color: var(--cnm-blanco);
}

/* --- Secciones genéricas de home/listados ---------------------------- */
.cnm-section {
	padding-block: 2.5rem;
}

.cnm-section__title {
	margin-bottom: 1.25rem;
}

.cnm-section__more {
	text-align: center;
	margin-top: 1.5rem;
}

/* --- Slider ----------------------------------------------------------
   Punto 11 del brief: imágenes con bordes redondeados, autoplay,
   navegación e indicadores manejados por assets/js/components/slider.js.
   El slider respeta el ancho del contenedor de contenido (--cnm-ancho-
   contenido, configurable en el Customizer) en vez de ocupar el 100%
   de la pantalla — a diferencia del fondo general, que sí es de ancho
   completo (ver .cnm-site-bg). */
.cnm-slider-wrap {
	margin-top: 1.75rem;
}

.cnm-slider {
	position: relative;
	overflow: hidden;
	border-radius: var(--cnm-border-radius);
}

.cnm-slider__track {
	position: relative;
}

.cnm-slider__slide {
	position: relative;
}

.cnm-slider__slide-link {
	display: block;
	color: inherit;
}

.cnm-slider__image {
	width: 100%;
	max-height: 520px;
	object-fit: cover;
	border-radius: var(--cnm-border-radius);
}

.cnm-slider__caption {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 1.5rem 2rem;
	color: var(--cnm-blanco);
}

.cnm-slider__title {
	color: var(--cnm-blanco);
	margin-bottom: 0.25em;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.cnm-slider__subtitle {
	margin: 0 0 0.75em;
	color: var(--cnm-gris-plata);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.cnm-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: rgba(1, 23, 77, 0.55);
	color: var(--cnm-blanco);
	border: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}

.cnm-slider__nav--prev {
	left: 1rem;
}

.cnm-slider__nav--next {
	right: 1rem;
}

.cnm-slider__nav:hover {
	background-color: var(--cnm-color-hover);
}

.cnm-slider__dots {
	position: absolute;
	bottom: 0.75rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 0.4rem;
}

.cnm-slider__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: none;
	background-color: rgba(251, 251, 251, 0.5);
	cursor: pointer;
	padding: 0;
}

.cnm-slider__dot.is-active {
	background-color: var(--cnm-color-dorado);
}

/* --- Grid de noticias --------------------------------------------------- */
.cnm-noticias-recientes__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.5rem;
}

.cnm-noticia-card__image img {
	border-radius: var(--cnm-border-radius) var(--cnm-border-radius) 0 0;
}

.cnm-noticia-card__body {
	padding: 1.25rem;
}

.cnm-noticia-card__date {
	display: block;
	color: var(--cnm-color-secundario);
	font-size: 0.8rem;
	margin-bottom: 0.5em;
}

.cnm-noticia-card__excerpt {
	margin-bottom: 1rem;
}

/* --- Más escuchadas -----------------------------------------------------
   Punto 16 del brief: numeración destacada en dorado. Tarjeta oscura +
   elementos grandes, inspirado en la referencia que pidió el cliente;
   el orden ahora lo determinan los votos del público (ver
   inc/votos/class-rest-votos.php), no la posición manual. */
.cnm-mas-escuchadas__title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.cnm-mas-escuchadas__title svg {
	flex-shrink: 0;
	color: currentColor;
}

.cnm-mas-escuchadas__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.cnm-mas-escuchadas__item {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	background-color: var(--cnm-color-fondo-mas-escuchadas);
	border-radius: var(--cnm-border-radius);
	box-shadow: var(--cnm-sombra);
	padding: 0.85rem 1.25rem;
	color: var(--cnm-blanco);
}

.cnm-mas-escuchadas__pos {
	flex: 0 0 auto;
	width: 2.75rem;
	text-align: center;
	font-family: var(--cnm-fuente-titulos);
	font-weight: 700;
	font-size: 2rem;
	line-height: 1;
	color: var(--cnm-color-dorado);
}

.cnm-mas-escuchadas__cover {
	width: 84px;
	height: 84px;
	border-radius: 8px;
	object-fit: cover;
}

/* --- Botón de reproducción por canción (audio subido con ID3) --------- */
.cnm-mas-escuchadas__play {
	position: relative;
	flex: 0 0 auto;
	width: 84px;
	height: 84px;
	border-radius: 8px;
	border: none;
	padding: 0;
	cursor: pointer;
	background-color: var(--cnm-azul-profundo);
	overflow: hidden;
}

.cnm-mas-escuchadas__play .cnm-mas-escuchadas__cover {
	width: 100%;
	height: 100%;
	border-radius: 0;
	display: block;
}

.cnm-mas-escuchadas__play-icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cnm-blanco);
	background-color: rgba(0, 0, 0, 0.35);
	font-size: 1.3rem;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.cnm-mas-escuchadas__play:hover .cnm-mas-escuchadas__play-icon,
.cnm-mas-escuchadas__play.is-playing .cnm-mas-escuchadas__play-icon {
	opacity: 1;
}

.cnm-mas-escuchadas__play.is-playing .cnm-mas-escuchadas__play-icon {
	background-color: rgba(0, 0, 0, 0.55);
	font-size: 0;
}

.cnm-mas-escuchadas__play.is-playing .cnm-mas-escuchadas__play-icon::after {
	content: '❚❚';
	font-size: 1.2rem;
}

.cnm-mas-escuchadas__meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
	gap: 0.2rem;
}

.cnm-mas-escuchadas__titulo {
	font-family: var(--cnm-fuente-titulos);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--cnm-blanco);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cnm-mas-escuchadas__artista {
	font-size: 1rem;
	color: var(--cnm-gris-plata);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cnm-mas-escuchadas__chevron {
	flex: 0 0 auto;
	font-size: 1.5rem;
	color: var(--cnm-gris-plata);
	opacity: 0.6;
}

/* --- Botón de voto ------------------------------------------------------- */
.cnm-mas-escuchadas__voto {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	border: none;
	border-radius: 999px;
	padding: 0.5rem 1rem;
	background-color: rgba(251, 251, 251, 0.08);
	color: var(--cnm-blanco);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.cnm-mas-escuchadas__voto:hover:not(:disabled) {
	background-color: rgba(229, 28, 42, 0.25);
	transform: translateY(-1px);
}

.cnm-mas-escuchadas__voto-icon {
	color: var(--cnm-color-rojo);
	font-size: 1.1rem;
}

.cnm-mas-escuchadas__voto-count {
	font-weight: 700;
	font-size: 0.95rem;
}

.cnm-mas-escuchadas__voto.is-voted {
	background-color: rgba(229, 28, 42, 0.3);
	cursor: default;
}

.cnm-mas-escuchadas__voto:disabled {
	opacity: 0.9;
}

@media (max-width: 560px) {
	.cnm-mas-escuchadas__chevron {
		display: none;
	}
	.cnm-mas-escuchadas__cover,
	.cnm-mas-escuchadas__play {
		width: 60px;
		height: 60px;
	}
	.cnm-mas-escuchadas__pos {
		font-size: 1.4rem;
		width: 1.75rem;
	}
	.cnm-mas-escuchadas__titulo {
		font-size: 1rem;
	}
}

/* --- Layout mitad y mitad (Más escuchadas + Chat en vivo en la home) ------- */
.cnm-mitad-mitad {
	display: flex;
	gap: 2rem;
	align-items: flex-start;
	padding-block: 1rem;
}

.cnm-mitad-mitad__col {
	flex: 1 1 50%;
	min-width: 0;
}

@media (max-width: 900px) {
	.cnm-mitad-mitad {
		flex-direction: column;
	}
}

/* --- Chat en vivo -----------------------------------------------------------
   Autohospedado (tabla propia + REST + sondeo cada 4s), sin Google ni
   servicios de terceros. Ver inc/chat/. */
.cnm-chat__panel {
	background-color: var(--cnm-color-fondo-chat);
	border-radius: var(--cnm-border-radius);
	box-shadow: var(--cnm-sombra);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.cnm-chat__mensajes {
	height: 480px;
	overflow-y: auto;
	padding: 1rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.cnm-chat__vacio {
	margin: auto;
	color: var(--cnm-gris-plata);
	text-align: center;
}

.cnm-chat__mensaje {
	position: relative;
	background-color: rgba(251, 251, 251, 0.06);
	border-radius: 10px;
	padding: 0.5rem 0.75rem;
	max-width: 90%;
}

.cnm-chat__mensaje-cabeza {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.15rem;
}

.cnm-chat__mensaje-nombre {
	font-weight: 700;
	font-size: 0.8rem;
	color: var(--cnm-color-dorado);
}

.cnm-chat__mensaje-hora {
	font-size: 0.7rem;
	color: var(--cnm-gris-plata);
	opacity: 0.7;
}

.cnm-chat__mensaje-texto {
	display: block;
	color: var(--cnm-blanco);
	font-size: 0.9rem;
	word-break: break-word;
}

.cnm-chat__mensaje-borrar {
	position: absolute;
	top: 2px;
	right: 4px;
	background: none;
	border: none;
	color: var(--cnm-gris-plata);
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	padding: 2px 6px;
}

.cnm-chat__mensaje-borrar:hover {
	color: var(--cnm-color-rojo);
}

.cnm-chat__form {
	border-top: 1px solid rgba(251, 251, 251, 0.1);
	padding: 0.85rem 1.25rem 1rem;
	background-color: rgba(0, 0, 0, 0.15);
}

.cnm-chat__input-nombre {
	width: 100%;
	margin-bottom: 0.5rem;
	padding: 0.5rem 0.75rem;
	border-radius: 8px;
	border: 1px solid rgba(251, 251, 251, 0.15);
	background-color: rgba(251, 251, 251, 0.06);
	color: var(--cnm-blanco);
	font-size: 0.85rem;
}

.cnm-chat__input-row {
	display: flex;
	gap: 0.5rem;
}

.cnm-chat__input-mensaje {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.6rem 0.85rem;
	border-radius: 8px;
	border: 1px solid rgba(251, 251, 251, 0.15);
	background-color: rgba(251, 251, 251, 0.06);
	color: var(--cnm-blanco);
	font-size: 0.9rem;
}

.cnm-chat__input-nombre::placeholder,
.cnm-chat__input-mensaje::placeholder {
	color: var(--cnm-gris-plata);
	opacity: 0.7;
}

.cnm-chat__enviar {
	flex: 0 0 auto;
	padding-inline: 1.25rem;
}

.cnm-chat__nota {
	margin: 0.6rem 0 0;
	font-size: 0.72rem;
	color: var(--cnm-gris-plata);
	opacity: 0.7;
	text-align: center;
}

/* --- Sección "Síguenos" (redes destacadas) ----------------------------------
   Reemplaza el bloque genérico que iba después del slider. Banner con
   degradado de marca + 4 botones circulares grandes (Facebook,
   Instagram, TikTok, YouTube). Los enlaces se editan en
   CNM Radio → Redes sociales. */
.cnm-redes-destacadas-wrap {
	margin-top: 1.75rem;
}

.cnm-redes-destacadas {
	background: linear-gradient(135deg, var(--cnm-color-redes-destacadas) 0%, color-mix(in srgb, var(--cnm-color-redes-destacadas) 65%, black) 100%);
	color: var(--cnm-blanco);
	border-radius: var(--cnm-border-radius);
	overflow: hidden;
}

.cnm-redes-destacadas__inner {
	text-align: center;
	padding-block: 3.5rem;
}

.cnm-redes-destacadas__titulo {
	color: var(--cnm-blanco);
	font-size: 1.8rem;
	margin-bottom: 0.5em;
}

.cnm-redes-destacadas__subtitulo {
	color: var(--cnm-gris-plata);
	max-width: 520px;
	margin: 0 auto 2.25rem;
}

.cnm-redes-destacadas__grid {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1.75rem;
}

.cnm-redes-destacadas__boton {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	color: var(--cnm-blanco);
	width: 96px;
}

.cnm-redes-destacadas__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background-color: rgba(251, 251, 251, 0.1);
	border: 1px solid rgba(251, 251, 251, 0.18);
	color: var(--cnm-color-dorado);
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.cnm-redes-destacadas__boton:hover .cnm-redes-destacadas__icono,
.cnm-redes-destacadas__boton:focus .cnm-redes-destacadas__icono {
	background-color: var(--cnm-color-dorado);
	color: var(--cnm-azul-marino);
	transform: translateY(-4px);
}

.cnm-redes-destacadas__label {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--cnm-blanco);
}

/* --- Programación --------------------------------------------------------
   Puntos 12/13: pestañas por día, resaltando el programa en vivo. */
.cnm-programacion__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

.cnm-programacion__tab {
	padding: 0.5em 1.1em;
	border: 1px solid var(--cnm-gris-plata);
	background-color: var(--cnm-blanco);
	color: var(--cnm-color-primario);
	border-radius: 999px;
	cursor: pointer;
	font-family: var(--cnm-fuente-texto);
	font-size: 0.85rem;
}

.cnm-programacion__tab.is-active {
	background-color: var(--cnm-color-primario);
	color: var(--cnm-blanco);
	border-color: var(--cnm-color-primario);
}

.cnm-programacion__tab-hoy {
	color: var(--cnm-color-dorado);
	font-size: 0.75em;
}

.cnm-programacion__tab.is-active .cnm-programacion__tab-hoy {
	color: var(--cnm-color-dorado);
}

.cnm-programacion__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.cnm-programacion__item {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	background-color: var(--cnm-color-fondo-programacion);
	border-radius: var(--cnm-border-radius);
	box-shadow: var(--cnm-sombra);
	padding: 0.85rem 1.25rem;
	border-left: 4px solid transparent;
}

.cnm-programacion__item.is-live {
	border-left-color: var(--cnm-color-dorado);
}

.cnm-programacion__thumb {
	width: 84px;
	height: 84px;
	border-radius: 8px;
	object-fit: cover;
	flex: 0 0 auto;
}

.cnm-programacion__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
	gap: 0.2rem;
}

.cnm-programacion__horario {
	font-size: 0.85rem;
	color: var(--cnm-color-dorado);
	font-weight: 600;
}

.cnm-programacion__nombre {
	font-family: var(--cnm-fuente-titulos);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--cnm-blanco);
}

.cnm-programacion__nombre:hover {
	color: var(--cnm-color-dorado);
}

.cnm-programacion__locutores {
	font-size: 1rem;
	color: var(--cnm-gris-plata);
}

@media (max-width: 560px) {
	.cnm-programacion__thumb {
		width: 60px;
		height: 60px;
	}
	.cnm-programacion__nombre {
		font-size: 1rem;
	}
}

/* --- Locutores ------------------------------------------------------------- */
.cnm-locutores__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
}

.cnm-locutor-card__image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--cnm-border-radius) var(--cnm-border-radius) 0 0;
}

.cnm-locutor-card__body {
	padding: 1rem;
	text-align: center;
}

.cnm-locutor-card__cargo {
	color: var(--cnm-color-secundario);
	font-size: 0.85rem;
	margin: 0.2em 0;
}

.cnm-locutor-card__programa {
	font-size: 0.8rem;
	color: var(--cnm-color-acento);
	margin: 0.2em 0 0.6em;
}

.cnm-locutor-card__redes {
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.cnm-locutor-card__redes a {
	font-size: 0.75rem;
	padding: 0.25em 0.7em;
	border-radius: 999px;
	background-color: var(--cnm-color-fondo);
	border: 1px solid var(--cnm-gris-plata);
	color: var(--cnm-color-primario);
}

.cnm-locutor-card__redes a:hover {
	background-color: var(--cnm-color-dorado);
	color: var(--cnm-azul-marino);
	border-color: var(--cnm-color-dorado);
}

/* --- Apps móviles -----------------------------------------------------------
   Punto 20: sección antes del footer con los colores de marca. */
.cnm-apps-movil-wrap {
	margin-block: 1.75rem;
}

.cnm-apps-movil {
	background-color: var(--cnm-color-fondo-apps);
	color: var(--cnm-blanco);
	border-radius: var(--cnm-border-radius);
	overflow: hidden;
}

.cnm-apps-movil__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 2.5rem;
}

.cnm-apps-movil__texto h2 {
	color: var(--cnm-blanco);
	margin-bottom: 0.25em;
}

.cnm-apps-movil__texto p {
	margin: 0;
	color: var(--cnm-gris-plata);
}

.cnm-apps-movil__botones {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.cnm-apps-movil__badge img {
	height: 48px;
	width: auto;
	display: block;
}

.cnm-apps-movil__badge-respaldo {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	background-color: var(--cnm-blanco);
	color: var(--cnm-azul-marino);
	padding: 0.5rem 1rem;
	border-radius: 10px;
	transition: transform 0.15s ease;
}

.cnm-apps-movil__badge:hover .cnm-apps-movil__badge-respaldo {
	transform: translateY(-2px);
}

.cnm-apps-movil__badge-respaldo small {
	display: block;
	font-size: 0.65rem;
	color: var(--cnm-color-secundario);
	line-height: 1.2;
}

.cnm-apps-movil__badge-respaldo strong {
	display: block;
	font-size: 0.95rem;
	line-height: 1.2;
}

/* --- Reproductor inline ([reproductor_radio]) ------------------------------
   Controla el mismo <audio> global; ver assets/js/core/player.js. */
.cnm-inline-player {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
}

.cnm-inline-player__station {
	color: var(--cnm-color-secundario);
	font-size: 0.85rem;
}

/* --- Redes sociales ([redes_sociales]) -------------------------------------- */
.cnm-redes-sociales {
	list-style: none;
	display: flex;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.cnm-redes-sociales__link {
	display: inline-flex;
	align-items: center;
	padding: 0.4em 0.9em;
	border-radius: 999px;
	background-color: var(--cnm-color-primario);
	color: var(--cnm-blanco);
	font-size: 0.8rem;
}

.cnm-redes-sociales__link:hover {
	background-color: var(--cnm-color-dorado);
	color: var(--cnm-azul-marino);
}

/* --- Publicidad ([publicidad]) ------------------------------------------------ */
.cnm-ad-slot {
	display: flex;
	justify-content: center;
	margin-block: 1rem;
}

.cnm-ad-slot img {
	border-radius: var(--cnm-border-radius);
	max-width: 100%;
}

/* --- Botón flotante de WhatsApp ---------------------------------------------
   Punto 21: se usa el verde oficial de WhatsApp a propósito, no la
   paleta de marca — es un elemento de utilidad reconocible por
   convención universal, no un elemento de identidad visual de CNM Radio. */
.cnm-whatsapp-button {
	position: fixed;
	bottom: 1.5rem;
	z-index: 200;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #25d366;
	color: #fff;
	border-radius: 50%;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease;
}

.cnm-whatsapp-button:hover,
.cnm-whatsapp-button:focus {
	transform: scale(1.06);
	color: #fff;
}

.cnm-whatsapp-button--derecha {
	right: 1.5rem;
}

.cnm-whatsapp-button--izquierda {
	left: 1.5rem;
}

/* --- Layout del blog (contenido + sidebar) --------------------------------- */
.cnm-blog-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	padding-block: 2rem;
}

.cnm-blog-layout__sidebar .cnm-widget {
	margin-bottom: 1.5rem;
}

@media (min-width: 900px) {
	.cnm-blog-layout {
		grid-template-columns: 2fr 1fr;
	}
}

/* --- Archivo de noticias: grilla de 3 columnas, sin sidebar ---------------- */
.cnm-blog-archivo {
	padding-block: 2rem;
}

.cnm-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
}

@media (max-width: 900px) {
	.cnm-blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.cnm-blog-grid {
		grid-template-columns: 1fr;
	}
}

.cnm-blog-archivo__cargar-mas-wrap {
	text-align: center;
	margin-top: 2rem;
}

/* --- Barra lateral de la noticia individual: últimas 5 con portada --------- */
.cnm-sidebar-noticia__bloque {
	margin-bottom: 2rem;
}

.cnm-sidebar-noticia__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.cnm-sidebar-noticia__link {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	color: inherit;
}

.cnm-sidebar-noticia__img {
	width: 70px;
	height: 70px;
	border-radius: 8px;
	object-fit: cover;
	flex: 0 0 auto;
}

.cnm-sidebar-noticia__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cnm-sidebar-noticia__titulo {
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--cnm-color-titulos);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cnm-sidebar-noticia__link:hover .cnm-sidebar-noticia__titulo {
	color: var(--cnm-color-enlaces);
}

.cnm-sidebar-noticia__fecha {
	font-size: 0.75rem;
	color: var(--cnm-color-secundario);
}

/* --- Botones de compartir ---------------------------------------------------- */
.cnm-compartir {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 1.25rem 0;
}

.cnm-compartir__label {
	font-weight: 600;
	color: var(--cnm-color-secundario);
	font-size: 0.9rem;
}

.cnm-compartir__boton {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4em 0.9em;
	border-radius: 999px;
	color: var(--cnm-blanco);
	font-size: 0.82rem;
	font-weight: 600;
}

.cnm-compartir__boton--whatsapp {
	background-color: #25d366;
}

.cnm-compartir__boton--facebook {
	background-color: #1877f2;
}

.cnm-compartir__boton--x {
	background-color: #000;
}

.cnm-compartir__boton:hover {
	filter: brightness(1.1);
}

/* --- Menú móvil (punto 24: responsive, mobile-first) -----------------------
   Oculto por defecto; solo el botón hamburguesa se muestra por debajo
   del breakpoint. El panel .cnm-mobile-nav vive en el header, fuera de
   #cnm-content. */
.cnm-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	background: transparent;
	border: none;
	cursor: pointer;
}

.cnm-nav-toggle__bar {
	display: block;
	width: 22px;
	height: 2px;
	background-color: var(--cnm-blanco);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.cnm-nav-toggle.is-open .cnm-nav-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.cnm-nav-toggle.is-open .cnm-nav-toggle__bar:nth-child(2) {
	opacity: 0;
}

.cnm-nav-toggle.is-open .cnm-nav-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.cnm-mobile-nav {
	background-color: var(--cnm-color-header);
	border-top: 1px solid rgba(251, 251, 251, 0.12);
}

.cnm-mobile-nav__list {
	list-style: none;
	margin: 0;
	padding: 0.5rem 1rem 1rem;
}

.cnm-mobile-nav__list li {
	border-bottom: 1px solid rgba(251, 251, 251, 0.08);
}

.cnm-mobile-nav__list a {
	display: block;
	padding: 0.75rem 0.25rem;
	color: var(--cnm-blanco);
}

body.cnm-mobile-nav-open {
	overflow: hidden; /* Evita el scroll de fondo con el panel abierto. */
}

@media (max-width: 900px) {
	.cnm-nav {
		display: none; /* El menú de escritorio se reemplaza por el móvil. */
	}
	.cnm-nav-toggle {
		display: flex;
	}
}

@media (min-width: 901px) {
	.cnm-mobile-nav {
		display: none;
	}
}

/* --- Plantillas individuales de Programa y Locutor -------------------------
   Layout "imagen a la izquierda, texto a la derecha" (antes usaban la
   plantilla genérica de noticias, que no tenía sentido para ellos). */
.cnm-single-split {
	display: flex;
	gap: 2.5rem;
	align-items: flex-start;
	padding-block: 2.5rem;
}

.cnm-single-split__media {
	flex: 0 0 340px;
}

.cnm-single-split__image {
	width: 100%;
	border-radius: var(--cnm-border-radius);
	object-fit: cover;
	box-shadow: var(--cnm-sombra);
}

.cnm-single-split__media--redonda .cnm-single-split__image {
	border-radius: 50%;
	aspect-ratio: 1 / 1;
}

.cnm-single-split__content {
	flex: 1 1 auto;
	min-width: 0;
}

.cnm-single-split__title {
	margin-bottom: 0.3em;
}

.cnm-single-split__horario {
	color: var(--cnm-color-secundario);
	font-weight: 600;
	margin-bottom: 1.25rem;
}

.cnm-single-split__texto {
	line-height: 1.7;
}

.cnm-single-split__texto p {
	margin-bottom: 1em;
}

.cnm-single-split__bloque {
	margin-top: 1.75rem;
}

.cnm-single-split__subtitulo {
	font-size: 1.1rem;
	margin-bottom: 0.5em;
}

.cnm-single-split__locutores {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.cnm-single-split__locutores a {
	display: inline-block;
	padding: 0.4em 0.9em;
	border-radius: 999px;
	background-color: var(--cnm-color-fondo);
	border: 1px solid var(--cnm-gris-plata);
	color: var(--cnm-color-primario);
	font-size: 0.85rem;
}

.cnm-single-split__locutores a:hover {
	background-color: var(--cnm-color-dorado);
	color: var(--cnm-azul-marino);
	border-color: var(--cnm-color-dorado);
}

.cnm-single-split__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

@media (max-width: 782px) {
	.cnm-single-split {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.cnm-single-split__media {
		flex: 0 0 auto;
		width: 220px;
	}
	.cnm-single-split__locutores,
	.cnm-single-split__acciones {
		justify-content: center;
	}
}

/* --- Contenido editable de la portada (Ajustes → Lectura → Página estática) */
.cnm-front-page-content {
	padding-block: 1.5rem;
	line-height: 1.7;
}

.cnm-front-page-content > *:first-child {
	margin-top: 0;
}

/* --- Videos de YouTube -------------------------------------------------------
   Fila horizontal (no cuadrícula) con flechas a los costados, para que
   se vean unos pocos de entrada y el resto quede a un clic de distancia.
   El fondo de toda la sección es configurable, igual que Más escuchadas/
   Chat/Programación — por defecto es blanco (invisible contra la página). */
.cnm-youtube-videos {
	background-color: var(--cnm-color-fondo-youtube);
	border-radius: var(--cnm-border-radius);
	padding-inline: 1.5rem;
}

.cnm-youtube-videos__carrusel {
	position: relative;
}

.cnm-youtube-videos__row {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 0.25rem;
	/* Oculta la barra de scroll visualmente sin quitar el scroll táctil. */
	scrollbar-width: none;
}

.cnm-youtube-videos__row::-webkit-scrollbar {
	display: none;
}

.cnm-youtube-videos__item {
	flex: 0 0 auto;
	width: 340px;
	scroll-snap-align: start;
}

.cnm-youtube-videos__nav {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	z-index: 2;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: none;
	background-color: var(--cnm-color-primario);
	color: var(--cnm-blanco);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--cnm-sombra);
}

.cnm-youtube-videos__nav:hover {
	background-color: var(--cnm-color-hover);
}

.cnm-youtube-videos__nav--prev {
	left: -14px;
}

.cnm-youtube-videos__nav--next {
	right: -14px;
}

@media (max-width: 600px) {
	.cnm-youtube-videos__item {
		width: 260px;
	}
	.cnm-youtube-videos__nav {
		display: none; /* En móvil se navega deslizando con el dedo. */
	}
}

.cnm-youtube-videos__thumb {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 4px solid var(--cnm-color-dorado);
	padding: 0;
	cursor: pointer;
	border-radius: var(--cnm-border-radius);
	overflow: hidden;
	background-color: #000;
}

.cnm-youtube-videos__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cnm-youtube-videos__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	color: var(--cnm-blanco);
	background: rgba(0, 0, 0, 0.25);
}

.cnm-youtube-videos__play::before {
	content: '';
	position: absolute;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: var(--cnm-color-rojo);
	z-index: -1;
}

.cnm-youtube-videos__thumb:hover .cnm-youtube-videos__play::before {
	background-color: var(--cnm-color-dorado);
}

.cnm-youtube-videos__iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 4px solid var(--cnm-color-dorado);
	border-radius: var(--cnm-border-radius);
	display: block;
}

.cnm-youtube-videos__titulo {
	margin: 0.6rem 0 0;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--cnm-color-titulos);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- Pop-up del sitio -------------------------------------------------------
   Overlay oscuro + cuadro centrado, con la imagen/texto o el código
   embebido que se configure en Pop-ups. Solo un pop-up activo a la vez. */
.cnm-popup-overlay {
	position: fixed;
	inset: 0;
	z-index: 300;
	background-color: rgba(0, 0, 0, 0.65);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

/* Sin esta regla, el "display: flex" de arriba gana siempre sobre el
   comportamiento por defecto del atributo hidden del navegador —
   el pop-up nunca llegaba a ocultarse realmente al cerrarlo. */
.cnm-popup-overlay[hidden] {
	display: none;
}

body.cnm-popup-open {
	overflow: hidden;
}

.cnm-popup {
	position: relative;
	background-color: var(--cnm-blanco);
	border-radius: var(--cnm-border-radius);
	max-width: 480px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.cnm-popup__cerrar {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	z-index: 1;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background-color: rgba(0, 0, 0, 0.5);
	color: var(--cnm-blanco);
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
}

.cnm-popup__cerrar:hover {
	background-color: var(--cnm-color-rojo);
}

.cnm-popup__imagen {
	width: 100%;
	max-height: 260px;
	object-fit: cover;
	border-radius: var(--cnm-border-radius) var(--cnm-border-radius) 0 0;
}

.cnm-popup__contenido {
	padding: 1.5rem;
	text-align: center;
}

.cnm-popup__titulo {
	margin-bottom: 0.5em;
}

.cnm-popup__texto {
	margin-bottom: 1.25rem;
	line-height: 1.6;
}

.cnm-popup__html {
	padding: 1.5rem;
}

/* --- Accesibilidad: foco visible siempre ---------------------------------- */
:focus-visible {
	outline: 3px solid var(--cnm-color-dorado);
	outline-offset: 2px;
}

/* --- Utilidades responsive base -------------------------------------------- */
@media (max-width: 782px) {
	.cnm-container {
		width: 100%;
		padding-inline: 1rem;
	}
}