/* Contenedor fijo: guarda el <audio> y, si procede, el botón flotante.
   Sobrevive a los cambios de página del PJAX. */
.mc-player {
	position: fixed;
	z-index: 99999;
	line-height: 0;
}

/* El tema puede tener su propio botón "subir arriba" en la misma esquina
   (Boucherie: #scroll-to-top en bottom:60px), así que el flotante se queda
   pegado abajo del todo para no solaparse. */
.mc-bottom-right { right: 20px; bottom: 20px; }
.mc-bottom-left  { left: 20px;  bottom: 20px; }
.mc-top-right    { right: 20px; top: 20px; }
.mc-top-left     { left: 20px;  top: 20px; }

/* Si no hay botón flotante, el contenedor no debe capturar clics. */
.mc-player:empty,
.mc-player { pointer-events: none; }
.mc-player .mc-btn { pointer-events: auto; }

.mc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	/* border-box para que añadir trazo no agrande el botón: el borde se come
	   el tamaño elegido por dentro. */
	box-sizing: border-box;
	width: var(--mc-size, 52px);
	height: var(--mc-size, 52px);
	/* !important: el Elementor Kit (.elementor-kit-N button, especificidad 0,1,1)
	   pisa la clase .mc-btn (0,1,0) e impone su fondo/borde/radio/padding de tema.
	   Estas propiedades son las del propio botón del plugin, así que forzarlas no
	   afecta a nada más y devuelve el control al ajuste del usuario. */
	padding: 0 !important;
	border: var(--mc-bw, 0) solid var(--mc-bc, transparent) !important;
	background: var(--mc-bg, #111) !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
	cursor: pointer;
	vertical-align: middle;
	transition: transform .15s ease, box-shadow .15s ease;
}

.mc-btn.mc-sin-sombra { box-shadow: none; }

/* Formas. El radio del redondeado escala con el tamaño para que un botón
   grande no parezca un sello. */
.mc-shape-circle  { border-radius: 999px !important; }
.mc-shape-rounded { border-radius: calc(var(--mc-size, 52px) / 4) !important; }
.mc-shape-square  { border-radius: 0 !important; }

/* Con texto deja de ser un círculo y se adapta al contenido. */
.mc-btn:has(.mc-txt) {
	width: auto;
	padding: 0 calc(var(--mc-size, 52px) / 3) !important;
}

.mc-txt {
	color: var(--mc-icon, #fff);
	font-size: calc(var(--mc-size, 52px) / 3.6);
	line-height: 1;
	white-space: nowrap;
}

.mc-btn:hover  { transform: scale(1.08); }
.mc-btn:active { transform: scale(.96); }

.mc-btn:focus-visible {
	outline: 2px solid var(--mc-icon, #fff);
	outline-offset: 3px;
}

.mc-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--mc-size, 52px) / 2.2);
	height: calc(var(--mc-size, 52px) / 2.2);
	flex: none;
	line-height: 0;
}

/* El SVG hereda el color del botón: por eso los iconos propios no deben
   traer su propio atributo fill. */
.mc-ico svg {
	width: 100%;
	height: 100%;
	display: block;
	fill: var(--mc-icon, #fff);
}

/* Play por defecto; stop cuando suena. El estado va en el propio botón para
   que el flotante y los del shortcode se pinten igual. */
.mc-btn .mc-ico-stop { display: none; }
.mc-btn.mc-playing .mc-ico-play { display: none; }
.mc-btn.mc-playing .mc-ico-stop { display: flex; }

/* El shortcode se comporta como texto en línea. */
.mc-inline {
	display: inline-block;
	line-height: 0;
}

/* Pulso sutil, solo en el flotante: en línea distrae.
   Va en un ::after y no en el box-shadow del botón, porque si no la animación
   pisaría el ajuste "sin sombra" al reescribir esa misma propiedad. */
.mc-btn-float { position: relative; }

.mc-btn-float.mc-playing::after {
	content: "";
	position: absolute;
	inset: calc(var(--mc-bw, 0px) * -1);
	border-radius: inherit;
	pointer-events: none;
	animation: mc-pulse 2.4s infinite;
}

@keyframes mc-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .35); }
	70%  { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.mc-btn,
	.mc-btn-float.mc-playing::after { animation: none; transition: none; }
}

/* Barrita de carga durante la navegación sin recarga. */
.mc-loading::after {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 100%;
	background: var(--mc-bg, #111);
	transform-origin: 0 50%;
	animation: mc-bar 1.2s ease-out infinite;
	z-index: 100000;
}

@keyframes mc-bar {
	0%   { transform: scaleX(0); opacity: 1; }
	80%  { transform: scaleX(.9); opacity: 1; }
	100% { transform: scaleX(1); opacity: 0; }
}