/**
 * Apariencia base del reproductor de Radio Tridente.
 *
 * Esta hoja entrega una apariencia funcional, legible y accesible, fiel a la
 * identidad del reproductor anterior: azul muy oscuro, acentos rojo y celeste,
 * tarjetas redondeadas.
 *
 * TODO valor de color, radio o espaciado sale de una variable CSS. El tema de
 * Radio Tridente podrá redefinirlas sin sobrescribir una sola regla:
 *
 *     .rtc-player { --rtc-accent: #ff0000; }
 *
 * Diseño móvil primero. Los tamaños táctiles nunca bajan de 44 píxeles.
 *
 * @package RadioTridenteCore
 * @since   0.3.0
 */

.rtc-player {
	/* Color */
	--rtc-bg: #0a1a2f;
	--rtc-surface: #102a47;
	--rtc-surface-soft: #16375c;
	--rtc-text: #eaf2fb;
	--rtc-muted: #9db3cc;
	--rtc-accent: #e23744;
	--rtc-accent-soft: rgba(226, 55, 68, 0.15);
	--rtc-celeste: #45c2f0;
	--rtc-border: rgba(255, 255, 255, 0.09);

	/* Forma y ritmo */
	--rtc-radius: 18px;
	--rtc-radius-sm: 12px;
	--rtc-gap: 1rem;
	--rtc-pad: 1.15rem;

	box-sizing: border-box;
	max-width: 42rem;
	margin: 0 auto;
	padding: var(--rtc-pad);
	border: 1px solid var(--rtc-border);
	border-radius: var(--rtc-radius);
	background: var(--rtc-bg);
	color: var(--rtc-text);
	font-size: 16px;
	line-height: 1.45;
}

.rtc-player *,
.rtc-player *::before,
.rtc-player *::after {
	box-sizing: inherit;
}

.rtc-player p {
	margin: 0;
}

/* --------------------------------------------------------------------------
 * Bloque principal: carátula e información
 * ----------------------------------------------------------------------- */

.rtc-player__main {
	display: flex;
	align-items: center;
	gap: var(--rtc-gap);
}

.rtc-player__art {
	flex: 0 0 auto;
	width: 88px;
	height: 88px;
	overflow: hidden;
	border-radius: var(--rtc-radius-sm);
	background: var(--rtc-surface);
}

.rtc-player__cover {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rtc-player__info {
	flex: 1 1 auto;
	min-width: 0;
}

.rtc-player__badges {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.35rem;
}

.rtc-player__state {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--rtc-muted);
}

.rtc-player__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.rtc-player__state--online {
	color: var(--rtc-celeste);
}

.rtc-player__state--stale {
	color: #e8b64c;
}

.rtc-player__state--offline {
	color: var(--rtc-muted);
}

/* Distintivo de locutor al aire. */
.rtc-player__live {
	display: inline-flex;
	align-items: center;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	background: var(--rtc-accent);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.rtc-player__live[hidden] {
	display: none;
}

.rtc-player__title {
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.rtc-player__artist {
	color: var(--rtc-muted);
	font-size: 0.95rem;
	overflow-wrap: anywhere;
}

.rtc-player__listeners {
	margin-top: 0.4rem;
	color: var(--rtc-muted);
	font-size: 0.85rem;
}

.rtc-player__listeners[hidden] {
	display: none;
}

.rtc-player__listeners strong {
	color: var(--rtc-celeste);
}

/* --------------------------------------------------------------------------
 * Controles
 * ----------------------------------------------------------------------- */

.rtc-player__controls {
	display: flex;
	align-items: center;
	gap: var(--rtc-gap);
	margin-top: var(--rtc-gap);
	padding-top: var(--rtc-gap);
	border-top: 1px solid var(--rtc-border);
}

.rtc-player__toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--rtc-accent);
	color: #fff;
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.rtc-player__toggle:hover {
	background: #f04553;
}

.rtc-player__toggle:active {
	transform: scale(0.96);
}

.rtc-player__icon {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.rtc-player__icon--pause,
.rtc-player__toggle.is-playing .rtc-player__icon--play {
	display: none;
}

.rtc-player__toggle.is-playing .rtc-player__icon--pause {
	display: block;
}

/* Indicador de conexión: sustituye al icono mientras se conecta. */
.rtc-player__spinner {
	display: none;
	width: 22px;
	height: 22px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: rtc-spin 0.8s linear infinite;
}

.rtc-player__toggle.is-connecting .rtc-player__icon {
	display: none;
}

.rtc-player__toggle.is-connecting .rtc-player__spinner {
	display: block;
}

@keyframes rtc-spin {
	to {
		transform: rotate(360deg);
	}
}

.rtc-player__volume {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: 1 1 auto;
	min-width: 0;
}

.rtc-player__mute {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--rtc-radius-sm);
	background: transparent;
	color: var(--rtc-muted);
	cursor: pointer;
}

.rtc-player__mute:hover {
	color: var(--rtc-text);
}

.rtc-player__mute svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.rtc-player__mute.is-muted {
	color: var(--rtc-accent);
}

.rtc-player__mute.is-muted .rtc-player__wave {
	opacity: 0.25;
}

.rtc-player__slider {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	margin: 0;
	background: transparent;
	accent-color: var(--rtc-celeste);
	cursor: pointer;
}

.rtc-player__volume-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.rtc-player__hint {
	margin-top: 0.75rem;
	color: var(--rtc-muted);
	font-size: 0.85rem;
}

.rtc-player__notice {
	color: var(--rtc-muted);
	font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
 * Historial
 * ----------------------------------------------------------------------- */

.rtc-player__history {
	margin-top: var(--rtc-gap);
	padding-top: var(--rtc-gap);
	border-top: 1px solid var(--rtc-border);
}

.rtc-player__history[hidden] {
	display: none;
}

.rtc-player__history-title {
	margin: 0 0 0.5rem;
	color: var(--rtc-muted);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.rtc-player__history-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rtc-player__history-list li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--rtc-border);
	font-size: 0.88rem;
}

.rtc-player__history-list li:last-child {
	border-bottom: 0;
}

.rtc-player__history-song {
	color: var(--rtc-text);
}

.rtc-player__history-artist {
	color: var(--rtc-muted);
}

.rtc-player__history-artist::before {
	content: "·";
	margin-right: 0.35rem;
}

/* --------------------------------------------------------------------------
 * Accesibilidad
 * ----------------------------------------------------------------------- */

.rtc-player :focus-visible {
	outline: 3px solid var(--rtc-celeste);
	outline-offset: 2px;
}

.rtc-player .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {

	.rtc-player__spinner {
		animation-duration: 2.5s;
	}

	.rtc-player__toggle {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
 * Pantallas estrechas
 * ----------------------------------------------------------------------- */

@media (max-width: 26rem) {

	.rtc-player {
		--rtc-pad: 0.9rem;
	}

	.rtc-player__art {
		width: 68px;
		height: 68px;
	}

	.rtc-player__title {
		font-size: 1rem;
	}
}