/* ==========================================================================
   Rehearsal Kit Player — Official UX Layout (REHEARSAL-PLAYER-003B)
   Hierarchy: Waveform → Musical Transport → Horizontal Mixer → Speed → Status
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Global Frame & Container
   -------------------------------------------------------------------------- */
.rk-player-mount-frame {
	background: #0c1017;
	border-radius: 16px;
	padding: 24px;
	margin: 0 auto;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
	border: 1px solid #1a2233;
	color: #f1f5f9;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	box-sizing: border-box;
	width: 100%;
}

.rk-player-container {
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	box-sizing: border-box;
}

.rehearsal-kit-player.rk-player-redesign {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	text-align: left;
	box-sizing: border-box;
}

.rehearsal-kit-player button,
.vue-audio-mixer button {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	line-height: 1;
	font-family: inherit;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

/* --------------------------------------------------------------------------
   1. CABECERA (Header)
   -------------------------------------------------------------------------- */
.rk-song-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding-bottom: 12px;
	width: 100%;
	box-sizing: border-box;
}

.rk-header-left {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.rk-header-avatar {
	background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
	border-radius: 10px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
}

.rk-song-main-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.rk-song-title {
	font-size: 20px;
	font-weight: 700;
	color: #f8fafc;
	margin: 0;
	line-height: 1.2;
}

.rk-song-artist {
	font-size: 13px;
	font-weight: 500;
	color: #94a3b8;
	margin: 0;
}

.rk-song-musical-info {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	background: #0f1523 !important;
	border: 1px solid #1e293b !important;
	padding: 5px 12px !important;
	border-radius: 8px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	margin: 0 !important;
}

.rk-info-key {
	color: #34d399 !important;
	font-weight: 700 !important;
}

.rk-info-bpm,
.rk-info-time {
	color: #cbd5e1 !important;
}

.rk-info-dot {
	color: #475569 !important;
	font-size: 10px !important;
}

.rk-header-right {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.rk-header-btn {
	background: #111724;
	color: #94a3b8;
	border: 1px solid #232e42;
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 13px;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.rk-header-btn:hover {
	background: #182234;
	color: #f8fafc;
	border-color: #38bdf8;
}

.rk-caret-down {
	font-size: 10px;
	color: #64748b;
}

.rk-btn-fullscreen {
	padding: 8px 10px;
	font-size: 15px;
}

/* --------------------------------------------------------------------------
   2. MIXER WRAPPER & FULL-WIDTH ENFORCEMENT
   -------------------------------------------------------------------------- */
.mixer-wrapper {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	display: block !important;
}

.vue-audio-mixer {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
}

.vue-audio-mixer-loading-hider {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
}

/* --------------------------------------------------------------------------
   3. WAVEFORM / TIMELINE HERO
   -------------------------------------------------------------------------- */
.rk-waveform-hero {
	background: #090d15 !important;
	border: 1px solid #182030 !important;
	border-radius: 12px !important;
	padding: 16px 20px !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
}

.rk-waveform-container {
	position: relative !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.vue-audio-mixer-progress-bar.rk-interactive-waveform {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	min-height: 56px !important;
	background: #090d15 !important;
	border-radius: 6px !important;
	overflow: hidden !important;
	cursor: pointer !important;
	margin: 0 !important;
}

#vue-audio-mixer-waveform {
	display: block !important;
	width: 100% !important;
	height: 56px !important;
	background: #090d15 !important;
	border: none !important;
}

.vue-audio-mixer-progress-cursor.rk-playhead-cursor {
	position: absolute !important;
	top: 0 !important;
	width: 2px !important;
	height: 100% !important;
	background: #ffffff !important;
	box-shadow: 0 0 8px rgba(255, 255, 255, 0.9) !important;
	pointer-events: none !important;
	z-index: 10 !important;
}

.rk-playhead-node {
	position: absolute;
	top: -3px;
	left: -4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #ffffff;
	border: 2px solid #0284c7;
}

/* Musical Grid Layer over Waveform */
.rk-waveform-grid-layer {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	pointer-events: none !important;
	z-index: 5 !important;
}

.rk-grid-bar-marker {
	position: absolute !important;
	top: 0 !important;
	bottom: 0 !important;
	width: 1px !important;
	pointer-events: none !important;
	transform: translateX(-50%) !important;
}

.rk-grid-bar-line {
	position: absolute !important;
	top: 14px !important;
	bottom: 0 !important;
	left: 0 !important;
	width: 1px !important;
	background: rgba(148, 163, 184, 0.22) !important;
}

.rk-grid-bar-marker:nth-child(4n+1) .rk-grid-bar-line {
	background: rgba(148, 163, 184, 0.38) !important;
}

.rk-grid-bar-number {
	position: absolute !important;
	top: 2px !important;
	left: 3px !important;
	font-size: 9px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	color: rgba(148, 163, 184, 0.65) !important;
	font-family: "Share Tech Mono", monospace, Courier, sans-serif !important;
	user-select: none !important;
}

.rk-grid-bar-marker:nth-child(4n+1) .rk-grid-bar-number {
	color: rgba(226, 232, 240, 0.85) !important;
	font-weight: 700 !important;
}

.rk-waveform-times-bar {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-top: 10px !important;
	gap: 16px !important;
	width: 100% !important;
}

.rk-time-current {
	font-size: 16px;
	font-weight: 700;
	color: #f8fafc;
	font-family: "Share Tech Mono", monospace, Courier, sans-serif;
	min-width: 50px;
}

.rk-waveform-progress-track {
	flex: 1;
	height: 4px;
	background: #1e293b;
	border-radius: 2px;
	overflow: hidden;
}

.rk-waveform-progress-fill {
	height: 100%;
	background: #38bdf8;
	border-radius: 2px;
	transition: width 0.05s linear;
}

.rk-time-total {
	font-size: 16px;
	font-weight: 700;
	color: #94a3b8;
	font-family: "Share Tech Mono", monospace, Courier, sans-serif;
	min-width: 50px;
	text-align: right;
}

/* --------------------------------------------------------------------------
   4. TRANSPORTE MUSICAL (Controles Centrales + Velocidad/Pitch + Posición)
   -------------------------------------------------------------------------- */
.time_and_transport.rk-transport-hero {
	background: #0d121c !important;
	border: 1px solid #1e2638 !important;
	border-radius: 12px !important;
	padding: 12px 20px !important;
	margin: 0 !important;
	min-height: 64px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
}

.rk-transport-control-bar {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
	gap: 16px !important;
}

/* 4.1 Botones de Transporte Centrales (◀ | ▶ | ■) */
.rk-transport-group-center {
	display: flex !important;
	align-items: center !important;
	gap: 18px !important;
}

.rk-transport-group-right {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
}

.rk-btn-ctrl {
	background: #1a2233 !important;
	color: #cbd5e1 !important;
	border: 1px solid #273449 !important;
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background 0.15s, color 0.15s, transform 0.1s !important;
}

.rk-btn-ctrl:hover {
	background: #232e42 !important;
	color: #ffffff !important;
	transform: scale(1.05);
}

.rk-btn-play-hero {
	background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
	color: #ffffff !important;
	width: 58px !important;
	height: 58px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 4px 20px rgba(249, 115, 22, 0.5) !important;
	transition: transform 0.15s, box-shadow 0.15s !important;
}

.rk-btn-play-hero:hover {
	transform: scale(1.08);
	box-shadow: 0 6px 25px rgba(249, 115, 22, 0.65) !important;
}

/* 4.3 Controles Contextuales en Transporte (Velocidad & Pitch) */
.rk-transport-wrapper {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	width: 100% !important;
	position: relative !important;
}

.rk-transport-contextual-group {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}

.rk-contextual-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	background: #141c2b !important;
	color: #94a3b8 !important;
	border: 1px solid #222f44 !important;
	border-radius: 8px !important;
	padding: 6px 12px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}

.rk-contextual-btn.rk-btn-stacked {
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 5px 12px !important;
	min-width: 96px !important;
	height: 48px !important;
	box-sizing: border-box !important;
}

.rk-btn-side-icon {
	font-size: 15px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #94a3b8 !important;
	flex-shrink: 0 !important;
}

.rk-btn-stack-body {
	display: inline-flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 3px !important;
}

.rk-stack-label {
	font-size: 10px !important;
	font-weight: 700 !important;
	color: #64748b !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	line-height: 1 !important;
}

.rk-stack-value {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 4px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: #f1f5f9 !important;
	line-height: 1 !important;
}

.rk-value-text {
	color: #f8fafc !important;
	font-size: 13px !important;
	font-weight: 700 !important;
}

.rk-state-pill {
	font-size: 10px !important;
	font-weight: 800 !important;
	color: #64748b !important;
	background: #1e293b !important;
	padding: 2px 7px !important;
	border-radius: 10px !important;
	border: 1px solid #334155 !important;
	line-height: 1 !important;
	transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}

.rk-state-pill.is-on {
	background: #22c55e !important;
	color: #0f172a !important;
	border-color: #16a34a !important;
}

.rk-btn-pos-display {
	background: #0e1420 !important;
	border-color: #1d273a !important;
	cursor: default !important;
	user-select: none !important;
}

.rk-pos-value {
	color: #38bdf8 !important;
	font-family: monospace, sans-serif !important;
	font-weight: 800 !important;
}

.rk-contextual-btn:hover,
.rk-contextual-btn.is-active {
	background: #1e293b !important;
	color: #38bdf8 !important;
	border-color: #38bdf8 !important;
}

.rk-context-icon {
	font-size: 13px !important;
}

.rk-caret {
	font-size: 9px !important;
	opacity: 0.7 !important;
	color: #94a3b8 !important;
}

/* Paneles Contextuales Desplegables (Velocidad & Pitch) */
.rk-contextual-panel {
	background: #0d131f !important;
	border: 1px solid #273449 !important;
	border-radius: 10px !important;
	padding: 14px 18px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	animation: rkFadeSlideDown 0.18s ease-out !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

@keyframes rkFadeSlideDown {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: translateY(0); }
}

.rk-panel-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-bottom: 10px !important;
	padding-bottom: 6px !important;
	border-bottom: 1px solid #1a2436 !important;
}

.rk-panel-title {
	font-size: 11px !important;
	font-weight: 700 !important;
	color: #64748b !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
}

.rk-panel-close-btn {
	background: transparent !important;
	border: none !important;
	color: #64748b !important;
	font-size: 14px !important;
	cursor: pointer !important;
	padding: 2px 6px !important;
	border-radius: 4px !important;
}

.rk-panel-close-btn:hover {
	color: #f8fafc !important;
	background: #1e293b !important;
}

.rk-panel-speed-slider-row {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	margin: 8px 0 !important;
}

.rk-panel-speed-val {
	font-family: monospace !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #f97316 !important;
	min-width: 50px !important;
	text-align: right !important;
}

.rk-panel-speed-actions {
	display: flex !important;
	justify-content: flex-end !important;
	margin-top: 6px !important;
}

.rk-btn-reset-speed {
	background: #1a2233 !important;
	border: 1px solid #273449 !important;
	color: #94a3b8 !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	padding: 4px 10px !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	transition: background 0.15s, color 0.15s !important;
}

.rk-btn-reset-speed:hover {
	background: #232e42 !important;
	color: #f8fafc !important;
	border-color: #38bdf8 !important;
}

/* Tempo BPM Controls */
.rk-panel-tempo {
	min-width: 290px !important;
	width: 290px !important;
	right: 230px !important;
}

.rk-tempo-controls-row {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 16px !important;
	margin: 12px 0 14px 0 !important;
}

.rk-btn-tempo-step {
	background: #141c2a !important;
	border: 1px solid #27384f !important;
	color: #38bdf8 !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
}

.rk-btn-tempo-step:hover {
	background: #38bdf8 !important;
	color: #090d15 !important;
	transform: scale(1.06) !important;
}

.rk-tempo-input-wrap {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
}

.rk-tempo-number-input {
	background: #090d15 !important;
	border: 2px solid #27384f !important;
	border-radius: 10px !important;
	color: #f8fafc !important;
	font-size: 26px !important;
	font-weight: 800 !important;
	text-align: center !important;
	width: 96px !important;
	padding: 6px 4px !important;
	outline: none !important;
	-moz-appearance: textfield !important;
	transition: border-color 0.15s, box-shadow 0.15s !important;
}

.rk-tempo-number-input::-webkit-outer-spin-button,
.rk-tempo-number-input::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

.rk-tempo-number-input:focus {
	border-color: #38bdf8 !important;
	box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25) !important;
}

.rk-tempo-unit {
	font-size: 11px !important;
	font-weight: 700 !important;
	color: #64748b !important;
	letter-spacing: 0.1em !important;
	margin-top: 4px !important;
}

.rk-tempo-footer-row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding-top: 10px !important;
	border-top: 1px solid #1a2436 !important;
}

.rk-tempo-original-label {
	font-size: 12px !important;
	color: #94a3b8 !important;
	font-weight: 500 !important;
}

.rk-btn-reset-tempo {
	background: #1e293b !important;
	border: 1px solid #334155 !important;
	color: #e2e8f0 !important;
	border-radius: 6px !important;
	padding: 4px 10px !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
}

.rk-btn-reset-tempo:hover {
	background: #334155 !important;
	color: #ffffff !important;
}

/* Pitch Panel */
.rk-pitch-status-row {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	color: #22c55e !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	margin-bottom: 4px !important;
}

.rk-pitch-check {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 18px !important;
	height: 18px !important;
	border-radius: 50% !important;
	background: rgba(34, 197, 94, 0.2) !important;
	color: #22c55e !important;
	font-size: 11px !important;
}

.rk-pitch-desc {
	font-size: 12px !important;
	color: #94a3b8 !important;
	margin: 0 !important;
}

.rk-click-pill {
	background: #1e293b !important;
	border: 1px solid #334155 !important;
	color: #64748b !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	padding: 2px 7px !important;
	border-radius: 10px !important;
	margin-left: 2px !important;
	transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}

.rk-click-pill.is-on {
	background: #22c55e !important;
	color: #0f172a !important;
	border-color: #16a34a !important;
}

/* Panel Contextual Preconteo en Transporte */
.rk-panel-countin {
	min-width: 260px !important;
	width: 260px !important;
	right: 180px !important;
}

.rk-countin-pills-row {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 6px 0 !important;
}

.rk-pill-btn {
	background: #141c2a !important;
	border: 1px solid #27384f !important;
	color: #94a3b8 !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	padding: 6px 12px !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
}

.rk-pill-btn:hover {
	background: #1e293b !important;
	color: #f8fafc !important;
	border-color: #38bdf8 !important;
}

.rk-pill-btn.is-active {
	background: #38bdf8 !important;
	color: #090d15 !important;
	border-color: #38bdf8 !important;
	font-weight: 700 !important;
}

/* 4.4 Posición Musical Derecha (Bar · Beat) */
.rk-transport-pos-badge {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	min-width: 140px !important;
}

.rk-pos-text {
	background: #161e2e !important;
	border: 1px solid #273449 !important;
	border-radius: 8px !important;
	padding: 6px 14px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: #38bdf8 !important;
	letter-spacing: 0.02em !important;
}

/* --------------------------------------------------------------------------
   5. MEZCLADOR DE PISTAS HORIZONTAL (Pista | M S | Volumen | Panorama)
   -------------------------------------------------------------------------- */
.vue-audio-mixer-channel-strip.rk-mixer-horizontal {
	background: #090d15 !important;
	border: 1px solid #182030 !important;
	border-radius: 12px !important;
	padding: 16px 20px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.vue-audio-mixer-channel-strip.rk-mixer-horizontal.is-collapsed {
	max-height: 0 !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	border: none !important;
}

.rk-mixer-section-header {
	display: flex !important;
	align-items: center !important;
	padding-bottom: 8px !important;
	margin-bottom: 4px !important;
	border-bottom: 1px solid #1e293b !important;
}

.rk-mixer-section-title {
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: #94a3b8 !important;
}

.rk-mixer-toggle-bar {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	padding: 12px 0 4px 0 !important;
	width: 100% !important;
}

.rk-btn-toggle-mixer {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	background: #111827 !important;
	border: 1px solid #273449 !important;
	color: #cbd5e1 !important;
	padding: 8px 22px !important;
	border-radius: 20px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
	transition: all 0.2s ease !important;
}

.rk-btn-toggle-mixer:hover {
	background: #1f293d !important;
	border-color: #38bdf8 !important;
	color: #ffffff !important;
	box-shadow: 0 4px 12px rgba(56, 189, 248, 0.15) !important;
}

.rk-btn-toggle-mixer.is-expanded {
	background: #1a2234 !important;
	border-color: #334155 !important;
	color: #94a3b8 !important;
}

.rk-btn-toggle-mixer.is-expanded:hover {
	border-color: #64748b !important;
	color: #f1f5f9 !important;
}

.rk-toggle-mixer-icon {
	font-size: 14px !important;
	line-height: 1 !important;
}

.rk-toggle-mixer-arrow {
	font-size: 10px !important;
	opacity: 0.75 !important;
}

.rk-mixer-columns-header {
	display: none !important;
}

.rk-col-track {
	width: 160px !important;
	min-width: 160px !important;
	max-width: 160px !important;
	text-align: left !important;
}

.rk-col-actions {
	width: 72px !important;
	min-width: 72px !important;
	text-align: center !important;
}

.rk-col-volume {
	flex: 1 !important;
	text-align: center !important;
}

.rk-col-pan {
	width: 140px !important;
	min-width: 140px !important;
	text-align: center !important;
}

.rk-mixer-tracks-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.vue-audio-mixer-channel.rk-mixer-row {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 14px !important;
	height: 48px !important;
	min-height: 48px !important;
	padding: 0 16px !important;
	margin: 0 !important;
	background: #111724 !important;
	border: 1px solid #1d273a !important;
	border-radius: 8px !important;
	box-sizing: border-box !important;
	width: 100% !important;
	transition: background 0.15s ease, border-color 0.15s ease !important;
}

.vue-audio-mixer-channel.rk-mixer-row:hover {
	background: #161e2e !important;
	border-color: #2e3c54 !important;
}

.vue-audio-mixer-channel.vue-audio-mixer-is-master,
.vue-audio-mixer-channel.rk-row-master {
	background: #141c2a !important;
	border-top: 1px solid #273449 !important;
	border-color: #2dd4bf !important;
	margin-top: 6px !important;
}

/* Columna 1: PISTA (Nombre de Pista) */
.rk-channel-header-col {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	width: 220px !important;
	min-width: 180px !important;
	max-width: 240px !important;
	flex-shrink: 0 !important;
}

.rk-track-speaker-icon,
.rk-track-instrument-icon {
	font-size: 15px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	width: 20px !important;
	text-align: center !important;
}

.rk-channel-title {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #f8fafc !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	display: block !important;
	width: 100% !important;
}

/* Columna 2: M / S (Mute & Solo) */
.rk-channel-actions-col {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 8px !important;
	width: 72px !important;
	min-width: 72px !important;
	flex-shrink: 0 !important;
}

.vue-audio-mixer-channel-mute-button,
.vue-audio-mixer-channel-solo-button {
	position: static !important;
	display: inline-flex !important;
	margin: 0 !important;
}

.vue-audio-mixer-channel-mute-button-label,
.vue-audio-mixer-channel-solo-button-label {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 26px !important;
	height: 26px !important;
	border-radius: 6px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	background: #1a2233 !important;
	color: #94a3b8 !important;
	border: 1px solid #273449 !important;
	cursor: pointer !important;
	transition: background 0.15s, color 0.15s !important;
}

.vue-audio-mixer-channel-mute-button input:checked + .vue-audio-mixer-channel-mute-button-label {
	background: #ef4444 !important;
	color: #ffffff !important;
	border-color: #dc2626 !important;
}

.vue-audio-mixer-channel-solo-button input:checked + .vue-audio-mixer-channel-solo-button-label {
	background: #f59e0b !important;
	color: #0f172a !important;
	border-color: #d97706 !important;
}

/* Columna 3: VOLUMEN (Slider Horizontal + Valor Numérico) */
.rk-channel-volume-col {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	flex: 1 !important;
	min-width: 160px !important;
}

/* Variables de color semántico por tipo de track */
.rk-row-piano { --track-accent: #38bdf8; }
.rk-row-guitar { --track-accent: #f97316; }
.rk-row-bass { --track-accent: #a855f7; }
.rk-row-drums { --track-accent: #ef4444; }
.rk-row-vocals { --track-accent: #ec4899; }
.rk-row-accordion { --track-accent: #eab308; }
.rk-row-percussion { --track-accent: #f59e0b; }
.rk-row-trumpet { --track-accent: #e11d48; }
.rk-row-sax { --track-accent: #d97706; }
.rk-row-violin { --track-accent: #10b981; }
.rk-row-click { --track-accent: #2dd4bf; }
.rk-row-other, .rk-row-default { --track-accent: #94a3b8; }
.rk-row-original { --track-accent: #64748b; }
.rk-row-guide { --track-accent: #8b5cf6; }
.rk-row-band { --track-accent: #38bdf8; }
.rk-row-master { --track-accent: #6366f1; }

.rk-track-slider.rk-slider-range {
	width: 100% !important;
	flex: 1 !important;
	height: 6px !important;
	border-radius: 3px !important;
	outline: none !important;
	border: none !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	background: linear-gradient(to right, var(--track-accent, #94a3b8) 0%, var(--track-accent, #94a3b8) var(--gain-progress, 85%), #1e293b var(--gain-progress, 85%), #1e293b 100%) !important;
}

.rk-track-slider.rk-slider-range::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	width: 16px !important;
	height: 16px !important;
	border-radius: 50% !important;
	background: var(--track-accent, #94a3b8) !important;
	cursor: pointer !important;
	box-shadow: 0 0 8px var(--track-accent, rgba(148, 163, 184, 0.8)) !important;
	border: 2px solid #0d121c !important;
}

.rk-track-slider.rk-slider-range::-moz-range-thumb {
	width: 16px !important;
	height: 16px !important;
	border-radius: 50% !important;
	background: var(--track-accent, #94a3b8) !important;
	cursor: pointer !important;
	box-shadow: 0 0 8px var(--track-accent, rgba(148, 163, 184, 0.8)) !important;
	border: 2px solid #0d121c !important;
}

.rk-volume-readout {
	font-family: monospace !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--track-accent, #94a3b8) !important;
	width: 32px !important;
	min-width: 32px !important;
	text-align: right !important;
	font-variant-numeric: tabular-nums !important;
	flex-shrink: 0 !important;
}

/* Columna 4: PANORAMA (L ──●── R) */
.rk-channel-pan-col {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	width: 140px !important;
	min-width: 140px !important;
}

.rk-pan-label {
	font-size: 11px !important;
	font-weight: 700 !important;
	color: #64748b !important;
}

.rk-pan-slider {
	width: 80px !important;
	height: 4px !important;
	border-radius: 2px !important;
	background: #1e293b !important;
	outline: none !important;
	border: none !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.rk-pan-slider::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	width: 12px !important;
	height: 12px !important;
	border-radius: 50% !important;
	background: #38bdf8 !important;
	cursor: pointer !important;
	box-shadow: 0 0 6px rgba(56, 189, 248, 0.8) !important;
	border: 1.5px solid #0d121c !important;
}

.rk-pan-placeholder {
	visibility: hidden !important;
}

/* --------------------------------------------------------------------------
   6. VELOCIDAD (Time-Stretch) Section
   -------------------------------------------------------------------------- */
.rk-speed-section {
	background: #0d121c;
	border: 1px solid #1e2638;
	border-radius: 12px;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	width: 100%;
	box-sizing: border-box;
}

.rk-speed-slider-wrap {
	flex: 1;
	min-width: 280px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.rk-speed-section-title {
	font-size: 11px;
	font-weight: 700;
	color: #94a3b8;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.rk-speed-ticks {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: #64748b;
	margin-bottom: 2px;
}

.rk-speed-ticks span.active {
	color: #f97316;
	font-weight: 700;
}

.rk-speed-range {
	width: 100%;
	height: 6px;
	border-radius: 3px;
	background: linear-gradient(to right, #f97316 0%, #f97316 var(--speed-progress), #1e293b var(--speed-progress), #1e293b 100%);
	outline: none;
	border: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.rk-speed-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #f97316;
	cursor: pointer;
	box-shadow: 0 0 10px rgba(249, 115, 22, 0.8);
	border: 2px solid #0d121c;
}

.rk-speed-badges-group {
	display: flex;
	align-items: center;
	gap: 12px;
}

.rk-speed-badge-box {
	background: #141b29;
	border: 1px solid #232e42;
	border-radius: 8px;
	padding: 8px 16px;
	text-align: center;
	min-width: 90px;
}

.rk-speed-value {
	font-size: 18px;
	font-weight: 700;
	color: #f8fafc;
	line-height: 1.1;
}

.rk-speed-sublabel {
	font-size: 10px;
	color: #64748b;
	margin-top: 2px;
}

.rk-pitch-box {
	text-align: left;
}

.rk-pitch-header {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #22c55e;
	font-size: 13px;
	font-weight: 600;
}

.rk-pitch-sublabel {
	font-size: 10px;
	color: #64748b;
	margin-top: 2px;
}

/* --------------------------------------------------------------------------
   7. INFORMACIÓN (Bottom Status Bar)
   -------------------------------------------------------------------------- */
.rk-info-status-bar {
	background: #0d121c;
	border: 1px solid #1e2638;
	border-radius: 12px;
	padding: 12px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	width: 100%;
	box-sizing: border-box;
}

.rk-info-box {
	display: flex;
	align-items: center;
}

.rk-info-primary {
	font-size: 13px;
	font-weight: 600;
	color: #cbd5e1;
	display: flex;
	align-items: center;
	gap: 8px;
}

.rk-status-icon {
	font-size: 14px;
	color: #38bdf8;
}

/* --------------------------------------------------------------------------
   8. MODO PRÁCTICA, PRECONTEO & STICKY MINIPLAYER
   -------------------------------------------------------------------------- */
.rk-mode-switch-group {
	display: inline-flex !important;
	align-items: center !important;
	background: #090d15 !important;
	border: 1px solid #1e293b !important;
	border-radius: 20px !important;
	padding: 2px !important;
}

.rk-mode-btn {
	background: transparent !important;
	border: none !important;
	color: #64748b !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	padding: 4px 12px !important;
	border-radius: 16px !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
}

.rk-mode-btn.is-active {
	background: #1e293b !important;
	color: #38bdf8 !important;
}

/* Options dropdown Count-In pills */
.rk-option-countin-row {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 6px !important;
	padding-top: 6px !important;
	border-top: 1px solid #1e293b !important;
}

.rk-countin-pill-group {
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
	background: #090d15 !important;
	border: 1px solid #1e293b !important;
	border-radius: 6px !important;
	padding: 2px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.rk-pill-btn {
	flex: 1 !important;
	background: transparent !important;
	border: none !important;
	color: #64748b !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	padding: 4px 6px !important;
	border-radius: 4px !important;
	cursor: pointer !important;
	text-align: center !important;
	transition: all 0.15s ease !important;
}

.rk-pill-btn.is-active {
	background: #1e293b !important;
	color: #38bdf8 !important;
	font-weight: 700 !important;
}

/* Practice Workspace Container */
.rk-practice-workspace {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	gap: 16px !important;
	padding-bottom: 96px !important;
	box-sizing: border-box !important;
	animation: rkFadeIn 0.2s ease-out !important;
}

@keyframes rkFadeIn {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Resource Viewport */
.rk-resource-viewport {
	background: #090d15 !important;
	border: 1px dashed #1e293b !important;
	border-radius: 12px !important;
	min-height: 280px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 30px !important;
	box-sizing: border-box !important;
}

.rk-resource-empty-state {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	max-width: 440px !important;
}

.rk-empty-icon {
	font-size: 40px !important;
	margin-bottom: 12px !important;
	color: #38bdf8 !important;
}

.rk-resource-empty-state h3 {
	margin: 0 0 6px 0 !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #ffffff !important;
}

.rk-resource-empty-state p {
	margin: 0 0 16px 0 !important;
	font-size: 13px !important;
	color: #94a3b8 !important;
	line-height: 1.5 !important;
}

.rk-practice-meta-tags {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
}

.rk-meta-tag {
	background: #111724 !important;
	border: 1px solid #1e293b !important;
	color: #cbd5e1 !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	padding: 4px 10px !important;
	border-radius: 6px !important;
}

/* COUNT-IN Display Animation in Viewport */
.rk-countin-active-display {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 16px !important;
	width: 100% !important;
	animation: rkFadeIn 0.15s ease-out !important;
}

.rk-countin-heading {
	font-size: 12px !important;
	font-weight: 800 !important;
	letter-spacing: 0.15em !important;
	text-transform: uppercase !important;
	color: #f97316 !important;
	background: rgba(249, 115, 22, 0.12) !important;
	padding: 4px 16px !important;
	border-radius: 20px !important;
	border: 1px solid rgba(249, 115, 22, 0.3) !important;
}

.rk-countin-subheading {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #94a3b8 !important;
}

.rk-countin-beats-row {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 20px !important;
	margin: 10px 0 !important;
}

.rk-countin-beat-node {
	width: 60px !important;
	height: 60px !important;
	border-radius: 50% !important;
	background: #141c2c !important;
	border: 2px solid #233149 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.rk-beat-number {
	font-size: 24px !important;
	font-weight: 800 !important;
	color: #475569 !important;
}

.rk-countin-beat-node.is-active {
	background: #f97316 !important;
	border-color: #ffedd5 !important;
	transform: scale(1.24) !important;
	box-shadow: 0 0 26px rgba(249, 115, 22, 0.9) !important;
}

.rk-countin-beat-node.is-active .rk-beat-number {
	color: #090d15 !important;
	font-weight: 900 !important;
}

.rk-countin-beat-node.is-active.is-downbeat {
	background: #38bdf8 !important;
	border-color: #e0f2fe !important;
	box-shadow: 0 0 30px rgba(56, 189, 248, 0.95) !important;
}

.rk-countin-beat-node.is-active.is-downbeat .rk-beat-number {
	color: #090d15 !important;
}

.rk-btn-cancel-countin {
	background: #1e293b !important;
	border: 1px solid #334155 !important;
	color: #94a3b8 !important;
	border-radius: 6px !important;
	padding: 5px 14px !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
}

.rk-btn-cancel-countin:hover {
	background: #334155 !important;
	color: #ffffff !important;
}

/* Floating MiniPlayer Dock (Fixed to viewport bottom, Spotify-style) */
.rk-floating-mini-player-dock {
	position: fixed !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 999 !important;
	display: flex !important;
	justify-content: center !important;
	padding: 12px 20px !important;
	box-sizing: border-box !important;
	background: linear-gradient(180deg, rgba(5, 9, 17, 0) 0%, rgba(5, 9, 17, 0.88) 25%, #050911 100%) !important;
	backdrop-filter: blur(10px) !important;
	pointer-events: none !important;
	animation: rkSlideUpDock 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes rkSlideUpDock {
	from { transform: translateY(100%); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

/* Floating MiniPlayer Bar */
.rk-floating-mini-player-dock .rk-mini-player-bar {
	pointer-events: auto !important;
	max-width: 1080px !important;
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 14px !important;
	background: #0d121c !important;
	border: 1px solid #1e293b !important;
	border-radius: 12px !important;
	padding: 10px 18px !important;
	box-shadow: 0 10px 35px rgba(0, 0, 0, 0.75), 0 0 0 1px #1e293b !important;
	box-sizing: border-box !important;
}

.rk-mini-title-wrap {
	display: flex !important;
	align-items: center !important;
	max-width: 130px !important;
	overflow: hidden !important;
}

.rk-mini-title {
	font-size: 13px !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	white-space: nowrap !important;
	text-overflow: ellipsis !important;
	overflow: hidden !important;
}

.rk-mini-btn-play {
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	border-radius: 50% !important;
	background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
	color: #ffffff !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: none !important;
	cursor: pointer !important;
	box-shadow: 0 2px 10px rgba(249, 115, 22, 0.4) !important;
	transition: transform 0.15s !important;
}

.rk-mini-btn-play:hover {
	transform: scale(1.08) !important;
}

.rk-mini-timeline-wrap {
	flex: 1 !important;
	min-width: 120px !important;
	height: 24px !important;
	display: flex !important;
	align-items: center !important;
	cursor: pointer !important;
	position: relative !important;
}

.rk-mini-track-bg {
	width: 100% !important;
	height: 6px !important;
	background: #1e293b !important;
	border-radius: 3px !important;
	position: relative !important;
}

.rk-mini-track-fill {
	height: 100% !important;
	background: linear-gradient(to right, #38bdf8, #f97316) !important;
	border-radius: 3px !important;
}

.rk-mini-track-cursor {
	position: absolute !important;
	top: 50% !important;
	width: 12px !important;
	height: 12px !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	border: 2px solid #f97316 !important;
	transform: translate(-50%, -50%) !important;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.6) !important;
}

.rk-mini-time-readout {
	font-family: monospace !important;
	font-size: 11px !important;
	color: #94a3b8 !important;
	font-weight: 600 !important;
	white-space: nowrap !important;
}

.rk-mini-musical-pos {
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
	font-size: 12px !important;
	color: #cbd5e1 !important;
	white-space: nowrap !important;
}

.rk-mini-bar-badge {
	background: #161e2e !important;
	border: 1px solid #273449 !important;
	border-radius: 6px !important;
	padding: 3px 8px !important;
	color: #38bdf8 !important;
	font-weight: 600 !important;
}

.rk-mini-bar-badge strong {
	color: #ffffff !important;
	font-size: 13px !important;
	font-weight: 800 !important;
}

.rk-mini-beat-badge {
	color: #64748b !important;
	font-weight: 600 !important;
}

.rk-mini-contextual-group {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
}

.rk-mini-ctx-btn {
	background: #141c2a !important;
	border: 1px solid #222f44 !important;
	color: #94a3b8 !important;
	border-radius: 6px !important;
	padding: 4px 10px !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
}

.rk-mini-ctx-btn:hover,
.rk-mini-ctx-btn.is-active {
	background: #1e293b !important;
	color: #38bdf8 !important;
	border-color: #38bdf8 !important;
}

.rk-mini-btn-mixer {
	background: #162032 !important;
	border: 1px solid #38bdf8 !important;
	color: #38bdf8 !important;
	border-radius: 8px !important;
	padding: 6px 14px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	transition: all 0.15s ease !important;
}

.rk-mini-btn-mixer:hover {
	background: #38bdf8 !important;
	color: #090d15 !important;
}

.rk-mini-floating-panel {
	position: absolute !important;
	bottom: calc(100% + 14px) !important;
	z-index: 2500 !important;
	background: #0d131f !important;
	border: 1px solid #253349 !important;
	border-radius: 12px !important;
	padding: 14px 16px !important;
	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
	box-sizing: border-box !important;
	animation: rkPopupSpring 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes rkPopupSpring {
	from { opacity: 0; transform: translateY(6px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.rk-panel-volume {
	min-width: 270px !important;
	width: 270px !important;
	right: 124px !important;
}

.rk-panel-pitch {
	min-width: 280px !important;
	width: 280px !important;
	right: 180px !important;
}

.rk-panel-speed {
	min-width: 320px !important;
	width: 320px !important;
	right: 230px !important;
}

.rk-panel-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-bottom: 10px !important;
}

.rk-panel-title {
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: 0.08em !important;
	color: #94a3b8 !important;
	text-transform: uppercase !important;
}

.rk-panel-close-btn {
	background: transparent !important;
	border: none !important;
	color: #64748b !important;
	font-size: 13px !important;
	cursor: pointer !important;
	padding: 2px 6px !important;
	border-radius: 4px !important;
	transition: color 0.15s !important;
}

.rk-panel-close-btn:hover {
	color: #ffffff !important;
	background: #1e293b !important;
}

.rk-panel-vol-slider-row {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin-top: 6px !important;
}

.rk-vol-icon {
	font-size: 15px !important;
}

.rk-panel-vol-slider {
	flex: 1 !important;
	background: linear-gradient(to right, #2dd4bf 0%, #2dd4bf var(--gain-progress), #1e293b var(--gain-progress), #1e293b 100%) !important;
}

.rk-panel-vol-slider::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	width: 16px !important;
	height: 16px !important;
	border-radius: 50% !important;
	background: #2dd4bf !important;
	cursor: pointer !important;
	box-shadow: 0 0 8px rgba(45, 212, 191, 0.8) !important;
	border: 2px solid #0d121c !important;
}

.rk-panel-vol-val {
	font-family: monospace !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: #2dd4bf !important;
	min-width: 28px !important;
	text-align: right !important;
}

@media (max-width: 768px) {
	.rk-mini-floating-panel {
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%) !important;
		max-width: calc(100vw - 24px) !important;
		width: 92% !important;
		min-width: auto !important;
	}
	@keyframes rkPopupSpring {
		from { opacity: 0; transform: translate(-50%, 6px) scale(0.98); }
		to { opacity: 1; transform: translate(-50%, 0) scale(1); }
	}
}

/* --------------------------------------------------------------------------
   9. VOLUMEN DEL CLIC & MASTER DUAL BAR (Top bar in Mixer)
   -------------------------------------------------------------------------- */
.rk-mixer-top-bar,
.rk-dual-header-bar {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 24px !important;
	padding: 12px 20px !important;
	background: #0c121e !important;
	border: 1px solid #1e2638 !important;
	border-radius: 10px !important;
	margin-bottom: 12px !important;
	box-sizing: border-box !important;
	width: 100% !important;
}

.rk-header-control-item {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 16px !important;
	flex: 1 !important;
	min-width: 0 !important;
}

.rk-header-control-item.is-solo-header {
	max-width: 100% !important;
	width: 100% !important;
}

.rk-header-control-label-group {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	flex-shrink: 0 !important;
}

.rk-header-control-icon {
	font-size: 14px !important;
}

.rk-header-control-name {
	font-size: 13px !important;
	font-weight: 700 !important;
	color: #cbd5e1 !important;
	white-space: nowrap !important;
}

.rk-header-slider-wrap {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	flex: 1 !important;
	min-width: 120px !important;
}

.rk-click-vol-slider {
	width: 100% !important;
	flex: 1 !important;
	background: linear-gradient(to right, #38bdf8 0%, #38bdf8 var(--gain-progress), #1e293b var(--gain-progress), #1e293b 100%) !important;
}

.rk-click-vol-slider::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	width: 16px !important;
	height: 16px !important;
	border-radius: 50% !important;
	background: #38bdf8 !important;
	cursor: pointer !important;
	box-shadow: 0 0 8px rgba(56, 189, 248, 0.8) !important;
	border: 2px solid #0d121c !important;
}

.rk-master-vol-slider {
	width: 100% !important;
	flex: 1 !important;
	background: linear-gradient(to right, #2dd4bf 0%, #2dd4bf var(--gain-progress), #1e293b var(--gain-progress), #1e293b 100%) !important;
}

.rk-master-vol-slider::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	width: 16px !important;
	height: 16px !important;
	border-radius: 50% !important;
	background: #2dd4bf !important;
	cursor: pointer !important;
	box-shadow: 0 0 8px rgba(45, 212, 191, 0.8) !important;
	border: 2px solid #0d121c !important;
}

@media (max-width: 700px) {
	.rk-dual-header-bar {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 14px !important;
	}
	.rk-header-control-item {
		width: 100% !important;
	}
}

/* Visibility Control for Modes */
.rk-mode-practice .mixer-wrapper,
.rk-mode-count_in .mixer-wrapper {
	display: none !important;
}

.rk-mode-practice_mixer_open .mixer-wrapper {
	position: fixed !important;
	inset: 0 !important;
	z-index: 99999 !important;
	background: rgba(5, 9, 17, 0.88) !important;
	backdrop-filter: blur(12px) !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
	padding: 40px 20px !important;
	overflow-y: auto !important;
	box-sizing: border-box !important;
	animation: rkFadeIn 0.18s ease-out !important;
}

.rk-modal-mixer-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
	max-width: 960px !important;
	margin-bottom: 14px !important;
}

.rk-modal-header-title {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}

.rk-modal-pill {
	font-size: 10px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	background: #22c55e !important;
	color: #090d15 !important;
	padding: 2px 8px !important;
	border-radius: 10px !important;
}

.rk-modal-header-title h3 {
	margin: 0 !important;
	font-size: 16px !important;
	color: #ffffff !important;
	font-weight: 700 !important;
}

.rk-modal-btn-close {
	background: #1e293b !important;
	border: 1px solid #334155 !important;
	color: #e2e8f0 !important;
	border-radius: 8px !important;
	padding: 6px 14px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	transition: background 0.15s, color 0.15s !important;
}

.rk-modal-btn-close:hover {
	background: #334155 !important;
	color: #ffffff !important;
}

.rk-mode-practice_mixer_open .vue-audio-mixer {
	width: 100% !important;
	max-width: 960px !important;
	background: #090d15 !important;
	border: 1px solid #1e293b !important;
	border-radius: 12px !important;
	padding: 18px !important;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
}

/* Responsive Header Meta Adaptation */
@media (max-width: 860px) {
	.rk-song-header {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 12px !important;
	}
	.rk-header-left {
		width: 100% !important;
		justify-content: flex-start !important;
	}
	.rk-header-right {
		width: 100% !important;
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		flex-wrap: wrap !important;
		gap: 10px !important;
	}
}

@media (max-width: 580px) {
	.rk-header-right {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 10px !important;
	}
	.rk-song-musical-info {
		width: 100% !important;
		justify-content: center !important;
		order: 2 !important;
	}
}