/* Wave Radio - añadidos mínimos de WordPress
   (el resto de estilos viven en css/style.css, sin tocar). */

.form-notice {
	padding: 10px 16px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 16px;
}
.form-notice.success {
	background: rgba(70, 200, 120, 0.12);
	color: #46c878;
	border: 1px solid rgba(70, 200, 120, 0.3);
}
.form-notice.error {
	background: rgba(255, 90, 90, 0.12);
	color: #ff5a5a;
	border: 1px solid rgba(255, 90, 90, 0.3);
}
.empty-state {
	padding: 40px 0;
	text-align: center;
}
.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	overflow: hidden;
	height: 1px;
	width: 1px;
}

/* Imagen del banner de app (no existía en el diseño original: se añade
   una columna a la derecha del texto cuando el cliente sube una imagen
   desde el Personalizador). */
.app-banner.has-image {
	flex-wrap: wrap;
	align-items: stretch;
}
.app-banner.has-image .banner-text {
	flex: 1 1 320px;
}
.app-banner .banner-image {
	flex: 1 1 280px;
	min-height: 220px;
	max-width: 420px;
	margin: -1px -1px -1px 0;
}
.app-banner .banner-image img {
	width: 100%;
	height: 100%;
	min-height: 220px;
	object-fit: cover;
	display: block;
}
@media (max-width: 768px) {
	.app-banner .banner-image {
		max-width: 100%;
		min-height: 180px;
		margin: 0;
	}
}

/* Sección "PROGRAMACIÓN" convertida a ancho completo (antes era una de
   4 tarjetas al 25% en un layout flex, no grid — por eso no ocupaba
   todo el ancho hasta corregir esto). */
.stations-grid.schedule-only {
	display: block;
}
.stations-grid.schedule-only .schedule-card {
	flex: 1 1 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
}
.schedule-list-full {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 24px;
}

/* Programa que se está emitiendo ahora mismo: dorado suave, más sobrio
   que el naranja vibrante de marca (--accent-color), tal como se pidió. */
.schedule-item.is-current {
	background: linear-gradient(90deg, rgba(230, 175, 46, 0.22), rgba(230, 175, 46, 0.08));
	border: 1px solid rgba(230, 175, 46, 0.5);
	box-shadow: 0 4px 18px rgba(230, 175, 46, 0.15);
}
.schedule-item.is-current .schedule-time,
.schedule-item.is-current .schedule-info h4 {
	color: #e6af2e;
}
.schedule-item.is-current .schedule-badge {
	background-color: rgba(230, 175, 46, 0.18);
	border-color: rgba(230, 175, 46, 0.5);
	color: #e6af2e;
}
.schedule-item.is-current::before {
	content: "AL AIRE";
	display: inline-block;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #e6af2e;
	margin-right: 10px;
}

/* Emisiones ya finalizadas hoy: atenuadas. */
.schedule-item.is-past {
	opacity: 0.45;
}

/* Logo real subido por el cliente (Personalizar → Identidad del sitio).
   Cuando existe, sustituye al logo de texto "AVAVA" de la plantilla. */
.top-header .logo.has-custom-logo {
	display: flex;
	align-items: center;
}
.top-header .logo.has-custom-logo img,
.top-header .logo.has-custom-logo .custom-logo {
	max-height: 52px;
	width: auto;
	display: block;
}
.site-footer .footer-logo.has-custom-logo img,
.site-footer .footer-logo.has-custom-logo .custom-logo {
	max-height: 60px;
	width: auto;
	display: block;
	margin-bottom: 16px;
}

/* Tabs de día en la página de Programación Completa */
.schedule-day-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 24px 0 32px;
}
.schedule-day-tab {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--glass-border, rgba(255,255,255,0.15));
	color: var(--text-muted, #a3a3ad);
	padding: 10px 20px;
	border-radius: 999px;
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	cursor: pointer;
	transition: all 0.2s ease;
}
.schedule-day-tab:hover {
	border-color: var(--accent-color, #ff7a00);
	color: var(--text-main, #fff);
}
.schedule-day-tab.is-active {
	background: var(--accent-color, #ff7a00);
	border-color: var(--accent-color, #ff7a00);
	color: #fff;
}
.schedule-day-tab .tab-count {
	opacity: 0.7;
	font-weight: 400;
	margin-left: 4px;
}
.schedule-day-panel {
	display: none;
}
.schedule-day-panel.is-active {
	display: block;
}

/* SVG en línea dentro de los botones de tarjeta (antes eran <i> de FontAwesome). */
.station-card .card-play-btn svg,
.radio-play-btn svg {
	width: 20px;
	height: 20px;
	color: var(--text-main, #fff);
	transition: color 0.3s ease;
}
.station-card .card-play-btn:hover svg,
.station-card .card-play-btn.playing svg {
	color: #ffffff;
}
.card-profile-link {
	text-decoration: none;
}

/* Corrige el clásico bug de "100vh" en navegadores móviles REALES: la
   barra de direcciones se expande/oculta al hacer scroll y el navegador
   no siempre recalcula 100vh a tiempo, dejando una franja en negro
   (el fondo de la página, detrás del video/imagen) hasta que se
   recalcula. No se reproduce en el emulador de escritorio porque ahí
   el alto del viewport es fijo, sin esa barra dinámica.
   100svh = "small viewport height", el alto garantizado visible con
   la barra de direcciones desplegada. Se deja 100vh antes como
   respaldo para navegadores que no soporten la unidad nueva. */
body {
	min-height: 100vh;
	min-height: 100svh;
}
.header-section {
	height: 100vh;
	height: 100svh;
}
.mobile-dropdown-menu {
	height: 100vh;
	height: 100svh;
}
@media (max-width: 768px) {
	.header-section {
		min-height: 100vh;
		min-height: 100svh;
	}
}

/* Botones de App Store / Google Play: uno debajo del otro en móvil,
   y que el SVG se adapte al ancho disponible (antes tenían un ancho
   fijo de 160px que se apretaba o se cortaba en pantallas angostas). */
.banner-apps a svg,
.banner-apps a img {
	width: 100%;
	max-width: 200px;
	height: auto;
}
@media (max-width: 600px) {
	.banner-apps {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 12px;
	}
	.banner-apps a {
		width: 100%;
	}
	.banner-apps a svg,
	.banner-apps a img {
		max-width: 100%;
	}
}