/* =========================================================
   WP Radio Player Flotante - Estilos frontend
   ========================================================= */

#wprp-player, #wprp-player * { box-sizing: border-box; }

.wprp-player {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 999999;
	width: 100%;
	color: var(--wprp-text, #fff);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-shadow: 0 0 24px rgba(0,0,0,.25);
	overflow: hidden;
	transition: transform .35s ease;
}
.wprp-player.wprp-pos-bottom { bottom: 0; }
.wprp-player.wprp-pos-top { top: 0; }
.wprp-player.wprp-collapsed.wprp-pos-bottom { transform: translateY(calc(100% - 10px)); }
.wprp-player.wprp-collapsed.wprp-pos-top { transform: translateY(calc(-100% + 10px)); }

.wprp-bg {
	position: absolute;
	inset: 0;
	background: var(--wprp-primary, #1e3a5f);
	background-image: linear-gradient(120deg, var(--wprp-primary, #1e3a5f), var(--wprp-secondary, #2c5282));
	background-size: 200% 200%;
	z-index: 0;
}

.wprp-inner {
	position: relative;
	z-index: 2;
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 16px;
	flex-wrap: wrap;
}

.wprp-toggle-collapse {
	position: absolute;
	top: -2px;
	right: 14px;
	z-index: 3;
	background: rgba(0,0,0,.25);
	border: none;
	color: #fff;
	width: 34px;
	height: 18px;
	border-radius: 4px 4px 0 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wprp-pos-bottom .wprp-toggle-collapse { top: -18px; border-radius: 6px 6px 0 0; }
.wprp-pos-top .wprp-toggle-collapse { top: auto; bottom: -18px; border-radius: 0 0 6px 6px; }
.wprp-chevron { width: 8px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); transition: transform .3s; }
.wprp-pos-top .wprp-chevron { transform: rotate(225deg); }
.wprp-player.wprp-collapsed .wprp-chevron { transform: rotate(225deg); }
.wprp-player.wprp-collapsed.wprp-pos-top .wprp-chevron { transform: rotate(45deg); }

.wprp-logo-wrap { position: relative; flex: 0 0 auto; }
.wprp-logo {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	background: rgba(255,255,255,.15);
	display: block;
	border: 2px solid rgba(255,255,255,.4);
}
.wprp-logo-fallback { display: flex; align-items: center; justify-content: center; font-size: 26px; }
.wprp-logo-fallback .dashicons { font-size: 28px; width: 28px; height: 28px; }

.wprp-live-dot {
	position: absolute;
	bottom: 2px;
	right: 2px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #ff3b30;
	border: 2px solid #fff;
	animation: wprp-blink 1.4s ease-in-out infinite;
}
@keyframes wprp-blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.wprp-controls { display: flex; align-items: center; gap: 14px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }

.wprp-playpause {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--wprp-accent, #ffffff);
	color: var(--wprp-primary, #1e3a5f);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform .15s ease;
}
.wprp-playpause:hover { transform: scale(1.06); }
.wprp-playpause svg { width: 20px; height: 20px; fill: currentColor; }

.wprp-info { min-width: 0; flex: 1 1 160px; }
.wprp-radio-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wprp-status { font-size: 12px; opacity: .85; }
.wprp-metadata { font-size: 12px; margin-top: 2px; max-width: 260px; overflow: hidden; white-space: nowrap; }
.wprp-marquee { display: inline-block; }

.wprp-volume-wrap { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.wprp-mute { background: transparent; border: none; color: inherit; cursor: pointer; padding: 4px; }
.wprp-mute svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.wprp-volume { width: 90px; accent-color: var(--wprp-accent, #fff); cursor: pointer; }

.wprp-socials { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.wprp-social { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; transition: background .2s, transform .2s; }
.wprp-social:hover { background: rgba(255,255,255,.35); transform: translateY(-2px); }
.wprp-social svg { width: 16px; height: 16px; fill: currentColor; }
.wprp-social-whatsapp { background: #25d366; color: #fff; }

.wprp-resume-overlay {
	position: absolute;
	inset: 0;
	z-index: 4;
	background: rgba(0,0,0,.55);
	color: #fff;
	border: none;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

@media (max-width: 640px) {
	.wprp-volume { display: none; }
	.wprp-inner { gap: 8px; padding: 6px 10px; }
	.wprp-logo, .wprp-logo-fallback { width: 36px; height: 36px; }
	.wprp-logo-fallback { font-size: 16px; }
	.wprp-live-dot { width: 9px; height: 9px; }
	.wprp-playpause { width: 36px; height: 36px; }
	.wprp-playpause svg { width: 15px; height: 15px; }
	.wprp-radio-name { font-size: 12px; line-height: 1.2; }
	.wprp-status { font-size: 10px; line-height: 1.2; }
	.wprp-metadata { font-size: 10px; line-height: 1.2; max-width: 140px; margin-top: 0; }
	.wprp-mute { padding: 2px; }
	.wprp-mute svg { width: 16px; height: 16px; }
	.wprp-social { width: 24px; height: 24px; }
	.wprp-social svg { width: 12px; height: 12px; }
	.wprp-socials { gap: 4px; }
	.wprp-controls { gap: 8px; }
}

/* =========================================================
   10 ESQUEMAS DE COLOR
   ========================================================= */
.wprp-scheme-1  { --wprp-primary:#0f3460; --wprp-secondary:#16537e; --wprp-accent:#ffffff; --wprp-text:#ffffff; }
.wprp-scheme-2  { --wprp-primary:#7a1f2b; --wprp-secondary:#b3273e; --wprp-accent:#ffe3e3; --wprp-text:#ffffff; }
.wprp-scheme-3  { --wprp-primary:#0b5345; --wprp-secondary:#12886b; --wprp-accent:#d9f7ec; --wprp-text:#ffffff; }
.wprp-scheme-4  { --wprp-primary:#3a0ca3; --wprp-secondary:#7209b7; --wprp-accent:#f2e9ff; --wprp-text:#ffffff; }
.wprp-scheme-5  { --wprp-primary:#bf360c; --wprp-secondary:#e65100; --wprp-accent:#fff3e0; --wprp-text:#ffffff; }
.wprp-scheme-6  { --wprp-primary:#8e0e5c; --wprp-secondary:#c2185b; --wprp-accent:#ffe0f0; --wprp-text:#ffffff; }
.wprp-scheme-7  { --wprp-primary:#7a5c00; --wprp-secondary:#c99a00; --wprp-accent:#fff8dc; --wprp-text:#2b2200; }
.wprp-scheme-8  { --wprp-primary:#00695c; --wprp-secondary:#00acc1; --wprp-accent:#e0fbff; --wprp-text:#ffffff; }
.wprp-scheme-9  { --wprp-primary:#141414; --wprp-secondary:#2b2b2b; --wprp-accent:#ffd700; --wprp-text:#ffffff; }
.wprp-scheme-10 { --wprp-primary:#ff0080; --wprp-secondary:#7928ca; --wprp-accent:#ffffff; --wprp-text:#ffffff; }
.wprp-scheme-10 .wprp-bg {
	background-image: linear-gradient(90deg,#ff0080,#7928ca,#2af598,#ff8a00,#ff0080);
	background-size: 400% 400%;
	animation: wprp-rainbow-shift 8s linear infinite;
}
@keyframes wprp-rainbow-shift { 0%{background-position:0% 50%;} 100%{background-position:100% 50%;} }

/* =========================================================
   20 ANIMACIONES DE LOGO (se alternan cada 10s por JS con clases wprp-logo-anim-N)
   ========================================================= */
@keyframes wprp-logo-1  { 0%,100%{transform:scale(1);} 50%{transform:scale(1.12);} }
@keyframes wprp-logo-2  { 0%,100%{transform:rotate(0deg);} 50%{transform:rotate(12deg);} }
@keyframes wprp-logo-3  { 0%{transform:translateY(0);} 50%{transform:translateY(-6px);} 100%{transform:translateY(0);} }
@keyframes wprp-logo-4  { 0%,100%{transform:rotate(0);} 100%{transform:rotate(360deg);} }
@keyframes wprp-logo-5  { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-4px);} 75%{transform:translateX(4px);} }
@keyframes wprp-logo-6  { 0%,100%{transform:scale(1) rotate(0);} 50%{transform:scale(1.08) rotate(-8deg);} }
@keyframes wprp-logo-7  { 0%,100%{transform:skewX(0);} 50%{transform:skewX(8deg);} }
@keyframes wprp-logo-8  { 0%,20%,50%,80%,100%{transform:translateY(0);} 40%{transform:translateY(-9px);} 60%{transform:translateY(-4px);} }
@keyframes wprp-logo-9  { 0%,100%{transform:rotate(0);} 25%{transform:rotate(-6deg);} 75%{transform:rotate(6deg);} }
@keyframes wprp-logo-10 { 0%,100%{filter:brightness(1);transform:scale(1);} 50%{filter:brightness(1.3);transform:scale(1.05);} }
@keyframes wprp-logo-11 { 0%{transform:rotate(0) scale(1);} 50%{transform:rotate(180deg) scale(1.1);} 100%{transform:rotate(360deg) scale(1);} }
@keyframes wprp-logo-12 { 0%,100%{transform:scale(1,1);} 50%{transform:scale(1.15,.9);} }
@keyframes wprp-logo-13 { 0%,100%{transform:translate(0,0);} 25%{transform:translate(-3px,-3px);} 50%{transform:translate(3px,-3px);} 75%{transform:translate(-3px,3px);} }
@keyframes wprp-logo-14 { 0%,100%{transform:scale(1);} 20%{transform:scale(.92);} 40%{transform:scale(1.08);} 60%{transform:scale(.96);} 80%{transform:scale(1.04);} }
@keyframes wprp-logo-15 { 0%,100%{transform:rotateY(0deg);} 50%{transform:rotateY(180deg);} }
@keyframes wprp-logo-16 { 0%,100%{transform:translateY(0) rotate(0);} 50%{transform:translateY(-5px) rotate(10deg);} }
@keyframes wprp-logo-17 { 0%{transform:rotate(0);} 10%{transform:rotate(-10deg);} 30%{transform:rotate(8deg);} 50%{transform:rotate(-6deg);} 70%{transform:rotate(4deg);} 100%{transform:rotate(0);} }
@keyframes wprp-logo-18 { 0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.5);} 50%{box-shadow:0 0 0 10px rgba(255,255,255,0);} }
@keyframes wprp-logo-19 { 0%{transform:scale(1);} 50%{transform:scale(1.2);} 100%{transform:scale(1);} }
@keyframes wprp-logo-20 { 0%,100%{transform:perspective(300px) rotateX(0);} 50%{transform:perspective(300px) rotateX(20deg);} }

.wprp-logo-anim-1  .wprp-logo, .wprp-logo-anim-1  .wprp-logo-fallback { animation: wprp-logo-1 2.2s ease-in-out infinite; }
.wprp-logo-anim-2  .wprp-logo, .wprp-logo-anim-2  .wprp-logo-fallback { animation: wprp-logo-2 2.4s ease-in-out infinite; }
.wprp-logo-anim-3  .wprp-logo, .wprp-logo-anim-3  .wprp-logo-fallback { animation: wprp-logo-3 1.8s ease-in-out infinite; }
.wprp-logo-anim-4  .wprp-logo, .wprp-logo-anim-4  .wprp-logo-fallback { animation: wprp-logo-4 5s linear infinite; }
.wprp-logo-anim-5  .wprp-logo, .wprp-logo-anim-5  .wprp-logo-fallback { animation: wprp-logo-5 1.2s ease-in-out infinite; }
.wprp-logo-anim-6  .wprp-logo, .wprp-logo-anim-6  .wprp-logo-fallback { animation: wprp-logo-6 2.6s ease-in-out infinite; }
.wprp-logo-anim-7  .wprp-logo, .wprp-logo-anim-7  .wprp-logo-fallback { animation: wprp-logo-7 2s ease-in-out infinite; }
.wprp-logo-anim-8  .wprp-logo, .wprp-logo-anim-8  .wprp-logo-fallback { animation: wprp-logo-8 2.5s ease-in-out infinite; }
.wprp-logo-anim-9  .wprp-logo, .wprp-logo-anim-9  .wprp-logo-fallback { animation: wprp-logo-9 2.3s ease-in-out infinite; }
.wprp-logo-anim-10 .wprp-logo, .wprp-logo-anim-10 .wprp-logo-fallback { animation: wprp-logo-10 1.8s ease-in-out infinite; }
.wprp-logo-anim-11 .wprp-logo, .wprp-logo-anim-11 .wprp-logo-fallback { animation: wprp-logo-11 4s ease-in-out infinite; }
.wprp-logo-anim-12 .wprp-logo, .wprp-logo-anim-12 .wprp-logo-fallback { animation: wprp-logo-12 1.6s ease-in-out infinite; }
.wprp-logo-anim-13 .wprp-logo, .wprp-logo-anim-13 .wprp-logo-fallback { animation: wprp-logo-13 1.4s linear infinite; }
.wprp-logo-anim-14 .wprp-logo, .wprp-logo-anim-14 .wprp-logo-fallback { animation: wprp-logo-14 2.8s ease-in-out infinite; }
.wprp-logo-anim-15 .wprp-logo, .wprp-logo-anim-15 .wprp-logo-fallback { animation: wprp-logo-15 3.2s ease-in-out infinite; }
.wprp-logo-anim-16 .wprp-logo, .wprp-logo-anim-16 .wprp-logo-fallback { animation: wprp-logo-16 2.1s ease-in-out infinite; }
.wprp-logo-anim-17 .wprp-logo, .wprp-logo-anim-17 .wprp-logo-fallback { animation: wprp-logo-17 2.6s ease-in-out infinite; }
.wprp-logo-anim-18 .wprp-logo, .wprp-logo-anim-18 .wprp-logo-fallback { animation: wprp-logo-18 1.8s ease-in-out infinite; border-radius: 50%; }
.wprp-logo-anim-19 .wprp-logo, .wprp-logo-anim-19 .wprp-logo-fallback { animation: wprp-logo-19 1.6s ease-in-out infinite; }
.wprp-logo-anim-20 .wprp-logo, .wprp-logo-anim-20 .wprp-logo-fallback { animation: wprp-logo-20 2.4s ease-in-out infinite; }

/* =========================================================
   20 ANIMACIONES DE FONDO (se alternan cada 10s por JS con clases wprp-bg-anim-N sobre #wprp-bg)
   ========================================================= */
@keyframes wprp-bg-1  { 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }
@keyframes wprp-bg-2  { 0%,100%{opacity:1;} 50%{opacity:.65;} }
@keyframes wprp-bg-3  { 0%{background-position:0 0;} 100%{background-position:60px 0;} }
@keyframes wprp-bg-4  { 0%{background-position:0 0;} 100%{background-position:0 60px;} }
@keyframes wprp-bg-5  { 0%,100%{filter:hue-rotate(0deg);} 50%{filter:hue-rotate(45deg);} }
@keyframes wprp-bg-6  { 0%,100%{transform:scale(1);} 50%{transform:scale(1.06);} }
@keyframes wprp-bg-7  { 0%{background-position:0% 0%;} 100%{background-position:100% 100%;} }
@keyframes wprp-bg-8  { 0%,100%{box-shadow:inset 0 0 60px rgba(255,255,255,.05);} 50%{box-shadow:inset 0 0 120px rgba(255,255,255,.25);} }
@keyframes wprp-bg-9  { 0%{background-position:-100% 0;} 100%{background-position:100% 0;} }
@keyframes wprp-bg-10 { 0%,100%{filter:brightness(1);} 50%{filter:brightness(1.18);} }
@keyframes wprp-bg-11 { 0%{background-position:0% 50%;} 25%{background-position:50% 100%;} 50%{background-position:100% 50%;} 75%{background-position:50% 0%;} 100%{background-position:0% 50%;} }
@keyframes wprp-bg-12 { 0%,100%{transform:skewY(0deg);} 50%{transform:skewY(1deg);} }
@keyframes wprp-bg-13 { 0%{background-position:0 0;} 100%{background-position:40px 40px;} }
@keyframes wprp-bg-14 { 0%,100%{filter:saturate(1);} 50%{filter:saturate(1.6);} }
@keyframes wprp-bg-15 { 0%{opacity:.85;} 50%{opacity:1;} 100%{opacity:.85;} }
@keyframes wprp-bg-16 { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
@keyframes wprp-bg-17 { 0%,100%{transform:rotate(0deg);} 50%{transform:rotate(.6deg);} }
@keyframes wprp-bg-18 { 0%{background-position:0 100%;} 100%{background-position:0 -100%;} }
@keyframes wprp-bg-19 { 0%,100%{filter:contrast(1);} 50%{filter:contrast(1.25);} }
@keyframes wprp-bg-20 { 0%{background-position:0% 0%;} 100%{background-position:200% 0%;} }

.wprp-bg-anim-1  { animation: wprp-bg-1 6s ease infinite; background-size: 200% 200%; }
.wprp-bg-anim-2  { animation: wprp-bg-2 4s ease-in-out infinite; }
.wprp-bg-anim-3  { animation: wprp-bg-3 3s linear infinite; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 10px, transparent 10px 20px), linear-gradient(120deg, var(--wprp-primary), var(--wprp-secondary)); }
.wprp-bg-anim-4  { animation: wprp-bg-4 3s linear infinite; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 10px, transparent 10px 20px), linear-gradient(120deg, var(--wprp-primary), var(--wprp-secondary)); }
.wprp-bg-anim-5  { animation: wprp-bg-5 5s ease-in-out infinite; }
.wprp-bg-anim-6  { animation: wprp-bg-6 5s ease-in-out infinite; }
.wprp-bg-anim-7  { animation: wprp-bg-7 7s ease infinite; background-size: 220% 220%; }
.wprp-bg-anim-8  { animation: wprp-bg-8 4s ease-in-out infinite; }
.wprp-bg-anim-9  { animation: wprp-bg-9 4s linear infinite; background-image: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%), linear-gradient(120deg, var(--wprp-primary), var(--wprp-secondary)); background-size: 300% 100%, 100% 100%; }
.wprp-bg-anim-10 { animation: wprp-bg-10 3.5s ease-in-out infinite; }
.wprp-bg-anim-11 { animation: wprp-bg-11 9s ease infinite; background-size: 250% 250%; }
.wprp-bg-anim-12 { animation: wprp-bg-12 5s ease-in-out infinite; }
.wprp-bg-anim-13 { animation: wprp-bg-13 2.5s linear infinite; background-image: radial-gradient(rgba(255,255,255,.18) 2px, transparent 2px), linear-gradient(120deg, var(--wprp-primary), var(--wprp-secondary)); background-size: 20px 20px, 100% 100%; }
.wprp-bg-anim-14 { animation: wprp-bg-14 4.5s ease-in-out infinite; }
.wprp-bg-anim-15 { animation: wprp-bg-15 3s ease-in-out infinite; }
.wprp-bg-anim-16 { animation: wprp-bg-16 6s linear infinite; background-image: linear-gradient(90deg, var(--wprp-primary), var(--wprp-secondary), var(--wprp-primary)); background-size: 300% 100%; }
.wprp-bg-anim-17 { animation: wprp-bg-17 5s ease-in-out infinite; }
.wprp-bg-anim-18 { animation: wprp-bg-18 5s linear infinite; background-image: linear-gradient(0deg, transparent 40%, rgba(255,255,255,.15) 50%, transparent 60%), linear-gradient(120deg, var(--wprp-primary), var(--wprp-secondary)); background-size: 100% 300%, 100% 100%; }
.wprp-bg-anim-19 { animation: wprp-bg-19 4s ease-in-out infinite; }
.wprp-bg-anim-20 { animation: wprp-bg-20 8s linear infinite; background-image: linear-gradient(120deg, var(--wprp-primary), var(--wprp-secondary), var(--wprp-primary)); background-size: 300% 100%; }

html.wprp-nav-loading { cursor: progress; }
html.wprp-nav-loading::before {
	content: '';
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--wprp-accent, #fff);
	z-index: 9999999;
	animation: wprp-loadbar 1s ease-in-out infinite;
}
@keyframes wprp-loadbar { 0%{transform:translateX(-100%);} 100%{transform:translateX(100%);} }

@media (prefers-reduced-motion: reduce) {
	.wprp-bg, .wprp-logo, .wprp-logo-fallback, .wprp-live-dot { animation: none !important; }
}