body {
  background: #000;
  color: #ddd;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 1vw; /* vw = viewport width (mejor que px en pantallas pequeñas) */
  box-sizing: border-box;
  width: 100%; /* Ensure both html and body span full width */
  height: 100%; /* Important for vertical centering/filling */
  overflow-x: hidden;
}
    h1 { text-align:center; color:#4EDF84; margin-bottom: 20px; }
    h2 { color:#4EDF84; font-size: 1em; color:#fff;   }
.decks-container { display:flex; justify-content:space-between; gap:6px; }

/*Moviles Samsung S20*/
@media screen and (min-width: 240px) and (max-width: 710px) {
	.master-deck-container {
		height: clamp(30px, 5vw, 30px);
	}
    .decks-container {
        transform: scale(0.45);
        transform-origin: center center; /* Asegura que la escala sea desde el centro */
        /* Margen negativo para compensar: (1 - 0.5) / 2 = 0.25 o 25% */
        margin-top: -31%;
        margin-left: -36%; /* Ajusta este valor si necesitas más o menos espacio vertical */
        /* Puedes necesitar también ajustar márgenes laterales si no está centrado */
    }
	.master-time-display {
		display: none; /* o visibility: hidden; o cualquier estilo que anule el anterior */
	}
}
/*Moviles Samsung S20 pantalla completa*/
@media screen and (min-width: 710px) and (max-width: 780px) {
	.master-deck-container {
		height: clamp(30px, 5vw, 30px);
	}
    .decks-container {
        transform: scale(0.46);
        transform-origin: center center;
        margin-top: -29.5%;
        margin-left: -33%;
	}
	.master-time-display {
		display: none; /* o visibility: hidden; o cualquier estilo que anule el anterior */
	}
}	

@media screen and (min-width: 780px) and (max-width: 900px) {
	.master-deck-container {
		height: clamp(30px, 5vw, 30px);
	}
    .decks-container {
        transform: scale(0.56);
        transform-origin: center center; /* Asegura que la escala sea desde el centro */
        /* Margen negativo para compensar: (1 - 0.5) / 2 = 0.25 o 25% */
        margin-top: -20%;
        margin-left: -28%; /* Ajusta este valor si necesitas más o menos espacio vertical */
        /* Puedes necesitar también ajustar márgenes laterales si no está centrado */
    }
	.master-time-display {
		display: none; /* o visibility: hidden; o cualquier estilo que anule el anterior */
	}
}

@media screen and (min-width: 900px) and (max-width: 915px) {
	.master-deck-container {
		height: clamp(30px, 5vw, 30px);
	}
    .decks-container {
        transform: scale(0.58);
        transform-origin: center center; /* Asegura que la escala sea desde el centro */
        /* Margen negativo para compensar: (1 - 0.5) / 2 = 0.25 o 25% */
        margin-top: -16.5%;
        margin-left: -24%; /* Ajusta este valor si necesitas más o menos espacio vertical */
        /* Puedes necesitar también ajustar márgenes laterales si no está centrado */
    }
}

@media screen and (min-width: 915px) and (max-width: 1360px) {
	.master-deck-container {
		height: clamp(30px, 5vw, 30px);
	}
    .decks-container {
        transform: scale(0.50);
        transform-origin: center center;
        margin-top: -22%;
        margin-left: -21.5%;
    }
}

/*Portatil T470*/
@media screen and (min-width: 1360px) and (max-width: 1540px) {
	.master-deck-container {
		height: clamp(30px, 5vw, 30px);
	}
    .decks-container {
        transform: scale(0.9);
        transform-origin: center center;
        margin-top: -2%;
        margin-left: -5%;
    }
}

@media screen and (min-width: 1540px) {
	.master-deck-container {
		height: clamp(65px, 5vw, 80px);
	}
    .decks-container {
        /* En pantallas más pequeñas, quizás quieras que sea un poco más ajustado */
        padding: 5px;
        /* Puedes ajustar el min-height si los elementos no caben bien en 100vh */
        min-height: auto;
    }

    .deck, .middle-controls {
        margin: 0 5px; /* Reduce el margen entre elementos */
        padding: 10px; /* Reduce el padding interno */
    }

    .deck {
        flex-basis: 300px; /* Un poco más pequeño para decks en móvil */
    }
}
    /*.deck { flex:1; background:#111; padding:10px; border-radius:8px; box-sizing:border-box; }*/
	.deck {
    flex-shrink: 0; /* Evita que los decks se encojan si no hay suficiente espacio */
    flex-grow: 1; /* Permite que los decks crezcan para ocupar el espacio disponible */
    flex-basis: 350px; /* Un tamaño base para cada deck. Ajusta según sea necesario. */
	height: fit-content;
    max-width: 100%; /* Un tamaño máximo para los decks en pantallas grandes */
    background-color: #0d0d0d;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 8px;
    margin: 0 10px; /* Margen entre los decks y los controles centrales */
    box-sizing: border-box;
    color: #eee;
    display: flex; /* Para organizar el contenido interno de cada deck */
    flex-direction: column;
	
}
    .waveform { width:100%; height:40px; background:#111; border-radius:6px; margin-bottom:10px; }
	.controls {
    display: flex; /* Makes the controls a flex container */
    flex-direction: row; /* Arranges items in a row (horizontal) */
    align-items: center; /* Vertically aligns items in the center */
    justify-content: space-between; /* Distributes items with space between them */
    /* You might want to add some padding or gap here too */
    gap: 15px; /* Adds space between elements */
    padding: 10px; /* Example padding */
	}
    .controls button { margin:5px; padding:8px 12px; background:#333; border:none; color:#eee; border-radius:4px; cursor:pointer; }
    .controls button:hover { background:#4EDF84; color:#121212; }
	
/* Estilos para el nuevo grupo de botones (Cue y Play) */
.button-group {
    display: flex; /* Convierte el grupo de botones en un contenedor flex */
    flex-direction: column; /* Alinea los botones internos verticalmente */
    gap: 5px; /* Espacio entre el botón "Cue" y el botón "Play" */
    align-items: center; /* Centra los botones horizontalmente dentro de su propio grupo */
    /* Puedes ajustar el padding o width si necesitas más espacio alrededor de los botones */
    padding: 5px; /* Pequeño padding interno para el grupo de botones */
}

/* Puedes ajustar el estilo de los botones individualmente aquí si quieres */
/* Por ejemplo, para darles un ancho fijo si no lo tienen ya */
.button-group button {
    width: 80px; /* Ejemplo de ancho para los botones si no lo tienen de otra regla */
    /* Asegúrate de que los estilos anteriores de tus botones estén bien definidos */
}

/*MasterWaves*/
/* Universal reset para asegurar que html y body no tengan márgenes ni paddings por defecto */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden; /* Muy importante para evitar scroll horizontal no deseado */
}

/* Contenedor principal de los master waveforms */
#masterWaveforms {
    display: flex;
    flex-direction: column;
    width: 98%; /* Esto ahora se referirá correctamente al 100% del ancho del body/html */
	//height: 65px;	
    overflow-x: hidden;
    margin: 0 auto;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;position: relative; }

#masterWaveforms::before {
    content: ''; /* Obligatorio para pseudo-elementos */
    position: absolute; /* Posicionamiento absoluto dentro de #masterWaveforms */
    left: 50%; /* Mueve el inicio de la línea al 50% del ancho del padre */
    transform: translateX(-50%); /* Ajusta la línea hacia la izquierda la mitad de su propio ancho para centrarla perfectamente */
    top: 0; /* Empieza desde la parte superior del contenedor */
    bottom: 0; /* Se extiende hasta la parte inferior del contenedor */
    width: 2px; /* Grosor de la línea */
    background-color: white; /* Color de la línea, puedes cambiarlo */
    z-index: 10; /* Asegura que la línea esté por encima de los waveforms si es necesario */
}	
	
/* Contenedor individual para cada deck maestro */
.master-deck-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
    position: relative; /* <--- CRUCIAL: Set position to relative here */
}

/* Línea de tiempo del master waveform (opcional, si quieres ocultarla, usa display: none;) */
.master-timeline {
    width: 100%;
    margin-bottom: 2px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 0;
    overflow: hidden;
}

/* Display de tiempo (ej. 0:00 / 2:00) */
.master-time-display {
    text-align: right;
    font-size: 0.7em;
    color: #666;
    font-family: 'Segoe UI', 'Roboto', sans-serif;
    padding-bottom: 2px;
    margin-bottom: 0;
    height: 1.2em;
}

/* Contenedor donde se dibuja la forma de onda del master */
.master-waveform-display {
    width: 100%;
    position: relative;
	overflow-x: auto;
    white-space: nowrap;
    background-color: transparent;
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    flex-grow: 1;

    /* Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

/* Estilo para la nueva línea blanca vertical */
.playback-center-line { 
    top: 0;
    bottom: 0;
    left: 50%; /* Places the left edge of the line at the horizontal center of .master-deck-container */
    transform: translateX(-50%); /* Centers the line itself */
    width: 3px; /* Or whatever width you prefer for your line */
    background-color: white; /* Your "línea blanca" */
    z-index: 10; /* Ensure it's above all content, adjust if needed */
}

.master-waveform-display::-webkit-scrollbar {
    height: 4px;
}
.master-waveform-display::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}
.master-waveform-display::-webkit-scrollbar-track {
    background: transparent;
}

/* Meters */
/* Nuevo contenedor para la etiqueta general y ambos medidores */
.overall-meters-container {
    display: flex;
    flex-direction: column; /* Apila el título y el grupo de medidores verticalmente */
    align-items: center; /* Centra el contenido horizontalmente */
    gap: 10px; /* Espacio entre el título y los medidores */
    margin-top: 3px; /* Margen superior para separar de otras secciones */
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Estilo para la etiqueta general "Meters levels" */
.overall-meter-label {
    color: #fff;
    font-size: 10px; /* Tamaño de fuente más grande para un título */
    font-weight: bold;
	text-align:center; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Contenedor para agrupar los dos medidores individuales */
.individual-meters-group {
    display: flex;
    gap: 2px; /* Espacio entre el medidor del Deck 1 y el del Deck 2 */
    align-items: flex-end; /* Alinea los medidores en la parte inferior si tienen diferentes alturas */
}

/* Contenedor para la barra de medidor única de un deck (simplificado) */
.channel-level-meter-wrapper {
    display: flex;
    justify-content: center; /* Centra la barra dentro de su propio wrapper */
    align-items: flex-end; /* Alinea la barra en la parte inferior */
    
    height: 120px; /* Altura total del área del medidor */
    width: 10px; /* Ancho del contenedor para la barra única */
    
    padding: 5px; /* Pequeño padding para el fondo visual */

    /* position: relative;  // Ya no es necesario aquí */
}

/* Estilo para la barra vertical del medidor (el elemento que contiene los segmentos) */
.channel-level-meter {
    width: 25px; /* Ancho de la barra del medidor */
    height: 100%; /* Ocupa toda la altura disponible del wrapper */
    background-color: #000;
    border: 1px solid #444;

    display: flex;
    flex-direction: column-reverse; /* Para que los segmentos se llenen de abajo hacia arriba */
    padding: 2px;
    gap: 2px;
    overflow: hidden;
}

/* Estilo para cada segmento individual dentro del medidor */
.meter-segment {
    flex-grow: 1;
    background-color: #333;
    border-radius: 1px;
    transition: background-color 0.05s linear;
}

/* Clases para los colores de los segmentos activos */
.meter-segment.active-green { background-color: #0f0; } /* Verde */
.meter-segment.active-orange { background-color: #ffa500; } /* Amarillo */
.meter-segment.active-red { background-color: #f00; } /* Rojo */

/*Pitch*/
	
.pitch-slider-container {
    display: flex;
    flex-direction: row; /* Mantenemos row si quieres el slider y los botones/otros elementos al lado */
    align-items: center;
    justify-content: right;
    gap: 8px; /* Usamos el gap del volumen */
    height: 165px; /* Usamos la altura del contenedor del volumen */
    position: relative; /* Asegura que cualquier posicionamiento absoluto futuro funcione dentro de este */
    padding: 10px 0; /* Si se usa para las etiquetas, igual que volumen */
    box-sizing: border-box;
}

.pitch-slider-container input[type=range] {
    writing-mode: vertical-lr; /* Slider vertical */
    direction: rtl; /* Dirección de arriba a abajo para el valor */
    width: 64px; /* Ancho del slider como el de volumen */
    height: 165px; /* Altura del slider como el de volumen */
    background: repeating-linear-gradient(
        to bottom,
        #333 0,
        #333 1px,
        transparent 1px,
        transparent 7px /* Misma separación de líneas que el volumen */
    );
    border-radius: 6px; /* Mismo redondeo que el volumen */
    appearance: none;
    position: relative;
    margin: 0; /* Misma configuración que el volumen */
}

.pitch-slider-container input[type=range]::-webkit-slider-thumb {
    appearance: none;
    width: 64px; /* Ancho del thumb como el de volumen */
    height: 32px; /* Alto del thumb como el de volumen */
    /* Fondo con la barra horizontal, igual que el volumen */
    background: linear-gradient(to bottom, #000 0%, #000 45%, #fff 45%, #fff 55%, #000 55%, #000 100%);
    border: 2px solid #888; /* Borde como el de volumen */
    border-radius: 4px; /* Redondeo como el de volumen */
    cursor: pointer;
    margin-top: -16px; /* Ajuste de alineación del thumb como el de volumen */
}

.pitch-slider-container input[type=range]::-moz-range-thumb {
    width: 64px; /* Ancho del thumb como el de volumen */
    height: 32px; /* Alto del thumb como el de volumen */
    /* Fondo con la barra horizontal, igual que el volumen */
    background: linear-gradient(to bottom, #000 0%, #000 45%, #fff 45%, #fff 55%, #000 55%, #000 100%);
    border: 2px solid #888; /* Borde como el de volumen */
    border-radius: 4px; /* Redondeo como el de volumen */
    cursor: pointer;
}

/* Estilos para los botones de Pitch (mantengo tus estilos existentes si te gustan) */
.pitch-slider-container button {
    padding: 8px 12px;
    background-color: #555;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.pitch-slider-container button:hover {
    background-color: #777;
}

.pitch-labels {
    display: flex;
    flex-direction: column; /* Apila los signos verticalmente */
    justify-content: space-between; /* Distribuye los signos uniformemente */
    height: 170px; /* Misma altura que la pista visual de tu pitch slider */
    font-size: 8px; /* Fuente pequeña como indicaste */
    color: #666; /* Color gris suave */
    user-select: none; /* Evita que el texto se seleccione */
    text-align: right; /* Alinea el texto a la derecha */
    padding-right: 2px; /* Pequeño espacio a la derecha */
}

.pitch-labels span {
    display: block; /* Asegura que cada span ocupe su propia línea */
    line-height: 1; /* Elimina espacio extra entre líneas */
    /* Para centrar visualmente los signos con los extremos y el centro del slider */
    transform: translateY(-50%); /* Ajuste general para subir un poco */
    
    /* El último span (el '-') debe estar más abajo */
    /* El primer span ('+') debe estar más arriba */
    /* El span del medio ('0') debe estar centrado */
}

/* Ajustes específicos para los extremos para alineación perfecta */
.pitch-labels span:first-child {
    transform: translateY(0%); /* Mueve el '+' a la parte superior de su espacio */
}

.pitch-labels span:last-child {
    transform: translateY(-100%); /* Mueve el '-' a la parte inferior de su espacio */
}
	
.middle-controls { background-color: #111; border-radius: 8px; display:flex; flex-direction:row; gap: 6px; align-items:flex-start; border: 1px solid #333; border-radius: 8px;}
.deck1-controls,
.deck2-controls {
  padding: 10px;
  flex: 1;
  color: #ddd;
  margin-top: 6px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  align-items: center;
}

.deck1-effects,
.deck2-effects {
  padding: 10px;
  flex: 1;
  color: #ddd;
  margin-top: 3px;
  max-width: 60px;
  align-items: center;
}

.trim-control { margin-bottom:20px; text-align:center; }
.trim-control label { display:block; font-weight:bold; margin-bottom:6px; color:#bbb; }
.eq-controls { display:flex; flex-direction:column; gap:15px; margin-bottom:20px; }

/* El `filter-control` y sus etiquetas */
.filter-control .filter-labels {
    display: flex;
    justify-content: space-between;
    width: 42px; /* Ajusta al nuevo tamaño del knob */
    font-size: 7px;
    color: #888;
    margin-top: 2px;
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* Mantener el resto de los estilos del slider de volumen y botones igual */
.cue-button { background:#ff8c00; color:#121212; border:none; border-radius:4px; padding:6px 15px; /* Reducir padding */ cursor:pointer; margin-bottom:10px; /* Reducir margen */ width:60px; /* Reducir ancho */ font-weight:bold; font-size:12px; /* Reducir fuente */ }
.cue-button:hover { background:#ffa733; }

.loop-button { 
	background: #ffa733; /* Un azul para diferenciarlo */
    border: 1px solid #0056b3;
    border-radius: 50%; /* Mantenemos redondo */
    width: 40px;
    height: 40px;
    color: #fff;
    font-weight: bold;
    font-size: 0.8rem;
    text-align: left; /* Esto ya debería estar centrado por display:flex en el base */
    cursor: pointer;
    box-shadow: inset 0 0 5px rgba(0, 123, 255, 0.5);
    /* display: flex; flex-direction: column; justify-content: center; align-items: center; */
    /* Estas propiedades ya están en button[data-action], no necesitas repetirlas aquí */
    user-select: none;
    transition: all 0.2s ease-in-out;
    font-family: 'Arial', sans-serif;
}
.loop-button:hover { background:#ffa733; }

.loop-button2 { 
	background: #000; /* Un azul para diferenciarlo */
    border: 1px solid #0056b3;
    border-radius: 50%; /* Mantenemos redondo */
    width: 30px;
    height: 30px;
    color: #fff;
    font-weight: bold;
    font-size: 0.8rem;
    text-align: left; /* Esto ya debería estar centrado por display:flex en el base */
    cursor: pointer;
    box-shadow: inset 0 0 5px rgba(0, 123, 255, 0.5);
    /* display: flex; flex-direction: column; justify-content: center; align-items: center; */
    /* Estas propiedades ya están en button[data-action], no necesitas repetirlas aquí */
    user-select: none;
    transition: all 0.2s ease-in-out;
    font-family: 'Arial', sans-serif;
}
.loop-button2:hover { background:#ffa733; }


.button {
    background: #555;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 10px;
    cursor: pointer;
    margin-bottom: 15px;
    width: 60px;
    font-weight: bold;
    font-size: 10px;
}
.button:hover { background:#ffa733; color:#000; }
.button.active {
    /* Estilos cuando el botón está "activo" */
    background-color: #ffa733; /* Un color diferente para el estado activo */
    transform: scale(1.05); /* Pequeño efecto al activarse */
    box-shadow: 0 0 15px rgba(255, 87, 51, 0.6); /* Sombra para resaltar */
}
.decks-container label {
    display: block; /* o inline-block */
    font-size: 10px;
    font-weight: bold;
    margin-bottom: 4px;
    color: #eee;
    text-align: center;
}

.effect-button { background:#007bff; color:#121212; border:none; border-radius:4px; padding:6px 10px; /* Reducir padding */ cursor:pointer; margin-bottom:15px; /* Reducir margen */ width:60px; /* Reducir ancho */ font-weight:bold; font-size:10px; /* Reducir fuente */ }
.effect-button:hover { background:#ffa733; }
.effect-button.active {
    /* Estilos cuando el botón está "activo" */
    background-color: #ffa733; /* Un color diferente para el estado activo */
    transform: scale(1.05); /* Pequeño efecto al activarse */
    box-shadow: 0 0 15px rgba(255, 87, 51, 0.6); /* Sombra para resaltar */
}

/* Nuevos estilos para el control-knob (aproximadamente 1/3 del tamaño) */
.control-knob {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	width: 40px; /* Reducido de 100px a 40px (aprox. 1/3) */
	height: 40px; /* Reducido de 100px a 40px */
	margin: 0 auto;
	margin-bottom: 10px; /* Reducir el espacio debajo del knob */
}

.control-knob label {
	font-size: 10px; /* Reducido de 14px a 10px */
	font-weight: bold;
	margin-bottom: 2px;
	color: #eee;
	position: absolute;
	top: -10px; /* Ajustar posición superior */
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
}

.control-knob input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 40px; /* Reducido de 80px a 30px */
	height: 40px; /* Reducido de 80px a 30px */
	background: radial-gradient(circle at center, #333 0%, #111 70%, #000 100%);
	border-radius: 50%;
	border: 1px solid #000;
	outline: none;
	cursor: grab;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	padding: 0;
	margin: 0;
}

/* Esconder el thumb original del input range (igual) */
.control-knob input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 0;
	height: 0;
	background: transparent;
	border: none;
}

.control-knob input[type="range"]::-moz-range-thumb {
	width: 0;
	height: 0;
	background: transparent;
	border: none;
}

/* Nuevo estilo para el indicador del knob (1/3 del tamaño) */
.knob-indicator {
	display: block;
	width: 3px; /* Reducido de 6px a 3px */
	height: 15px; /* Reducido de 30px a 15px */
	background: white;
	border-radius: 1px; /* Ajustar redondeo */
	position: absolute;
	top: 50%;
	left: 50%;
	transform-origin: 50% 100%;
	transform: translate(-50%, -50%) rotate(0deg);
	z-index: 3;
	pointer-events: none;
}

/* Etiquetas de valor numéricas (1/3 del tamaño) */
.control-knob .value-label {
	position: absolute;
	font-size: 8px; /* Reducido de 10px a 8px */
	color: #888;
	z-index: 2;
}

.control-knob .value-label.min {
	bottom: -6px; /* Ajustar posición inferior */
	left: 0px; /* Ajustar posición */
}

.control-knob .value-label.max {
	bottom: -6px; /* Ajustar posición inferior */
	right: 0px; /* Ajustar posición */
}

/* El `filter-control` también debe ser un knob (ajustar etiquetas) */
.filter-control .filter-labels {
	display: flex;
	justify-content: space-between;
	width: 40px; /* Ajustar al tamaño del knob */
	font-size: 7px; /* Reducir fuente */
	color: #888;
	margin-top: 2px; /* Ajustar margen */
	position: absolute;
	bottom: -10px; /* Ajustar posición debajo del knob */
	left: 50%;
	transform: translateX(-50%);
}

	/*Volumen*/
.volume-slider-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center; /* centers the slider horizontally */
  gap: 8px;
  height: 145px; /* Increased container height to fit the taller slider */
}

.volume-slider-container input[type=range] {
  writing-mode: vertical-lr;
  direction: rtl;
  width: 64px;
  height: 135px; /* Significantly increased track height for more travel */
  background: repeating-linear-gradient(
    to bottom,
    #333 0,
    #333 1px,
    transparent 1px,
    transparent 7px
  );
  border-radius: 6px;
  appearance: none;
  position: relative;
}

.volume-slider-container input[type=range]::-webkit-slider-thumb {
  appearance: none;
  width: 64px;
  height: 32px; /* Keep thumb height consistent */
  background: linear-gradient(to bottom, #000 0%, #000 45%, #fff 45%, #fff 55%, #000 55%, #000 100%);
  border: 2px solid #888;
  border-radius: 4px; /* rectangular shape */
  cursor: pointer;
  margin-top: -16px; /* Essential for the visual "touching ends" effect (half of thumb height) */
}

/* Also for Firefox compatibility */
.volume-slider-container input[type=range]::-moz-range-thumb {
  width: 64px;
  height: 32px; /* Keep thumb height consistent */
  background: linear-gradient(to bottom, #000 0%, #000 45%, #fff 45%, #fff 55%, #000 55%, #000 100%);
  border: 2px solid #888;
  border-radius: 4px; /* rectangular shape */
  cursor: pointer;
}
.volume-labels { display:flex; flex-direction:column; justify-content:space-between; height:110px; /* Reducir altura de las etiquetas */ font-size:8px; /* Reducir fuente */ color:#666; user-select:none; }		
		
/* Crossfader */	
.crossfader-container {
  display: flex;
  flex-direction: column;
  background: #000;
  align-items: center;
  justify-content: center;
  height: 100px;
  padding: 10px;
  gap: 6px;
  width: 95%;
  margin-bottom: 10px;
}

.crossfader-labels {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: sans-serif;
  color: #ccc;
  font-size: 1em;
}

.crossfader-container input[type=range] {
  width: 240px;
  height: 64px;
  background: repeating-linear-gradient(
    to right,
    #333 0,
    #333 1px,
    transparent 1px,
    transparent 7px
  );
  border-radius: 6px;
  appearance: none;
  position: relative;
}

.crossfader-container input[type=range]::-webkit-slider-thumb {
  appearance: none;
  width: 32px;
  height: 64px;
  background: linear-gradient(to right, #000 0%, #000 45%, #fff 45%, #fff 55%, #000 55%, #000 100%);
  border: 2px solid #888;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 0px;
}

.crossfader-container input[type=range]::-moz-range-thumb {
  width: 32px;
  height: 64px;
  background: linear-gradient(to right, #000 0%, #000 45%, #fff 45%, #fff 55%, #000 55%, #000 100%);
  border: 2px solid #888;
  border-radius: 4px;
  cursor: pointer;
}
.crossfader-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.crossfader-label {
  font-family: sans-serif;
  font-size: 1.2em;
  color: #ccc;
}

/*Botones Deck - CONFIGURACIÓN PARA DIFERENCIAR REDONDOS (PLAY/CUE/SYNC) Y CUADRADOS (LOOPS) */
button[data-action] {
    /* Estilos base para TODOS los botones con data-action (que NO sean loops) */
    border: 1px solid #fff; /* Borde blanco por defecto */
    border-radius: 50%; /* <<-- ESTO LOS HACE REDONDOS POR DEFECTO -->> */
    font-weight: bold;
    font-size: 0.9rem;
    text-align: center;
    cursor: pointer;
    box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.3); /* Sombra sutil por defecto (blanca/gris) */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    user-select: none;
    transition: all 0.2s ease-in-out;
    font-family: 'Arial', sans-serif;
}

/* Estilos específicos para el botón "play" */
button[data-action="play"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 80px;
    height: 80px;
    
    box-shadow: inset 0 0 5px rgba(0, 255, 0, 0.3); /* Sombra verde sutil */
    background: transparent;
    cursor: pointer;
}

.play-symbol, .pause-symbol, .divider {
    display: inline-flex;
    align-items: center;
}

button[data-action="play"] svg {
    display: inline;
    vertical-align: middle;
    fill: currentColor;
}

/* Estilos específicos para el botón "cue" */
button[data-action="cue"] {
	width: 80px;
    height: 80px;
    background: #000; /* Interior negro */
    border-color: #fff; /* Borde blanco */
    box-shadow: inset 0 0 5px rgba(255, 165, 0, 0.3); /* Sombra naranja sutil */
}

/* Efecto al pasar el ratón para todos los botones que usan la base data-action (redondos) */
button[data-action]:hover {
    background: #000; /* Un negro ligeramente más claro al pasar el ratón */
    box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.6); /* Sombra blanca más pronunciada por defecto */
    color: white; /* Color de texto por defecto al pasar el ratón */
    transform: translateY(-1px);
}

/* Efecto al pasar el ratón para el botón "play" */
button[data-action="play"]:hover {
    box-shadow: inset 0 0 8px rgba(0, 255, 0, 0.6); /* Sombra verde más pronunciada */
    color: #00ff00; /* Verde más brillante al pasar el ratón para el "play" */
}

/* Efecto al pasar el ratón para el botón "cue" */
button[data-action="cue"]:hover {
    background: #000;
    box-shadow: inset 0 0 8px rgba(255, 165, 0, 0.6); /* Sombra naranja más pronunciada */
    color: #FFB347; /* Naranja ligeramente más brillante al pasar el ratón */
    transform: translateY(-1px);
}

/* Efecto al hacer clic para todos los botones que usan la base data-action (redondos) */
button[data-action]:active {
    background: #000; /* Vuelve a negro sólido al hacer clic */
    box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9); /* Sombra blanca muy intensa */
    transform: translateY(0);
}

/* Efecto al hacer clic para el botón "play" */
button[data-action="play"]:active {
    box-shadow: inset 0 0 3px rgba(0, 255, 0, 0.9); /* Sombra verde muy intensa */
}

/* Efecto al hacer clic para el botón "cue" */
button[data-action="cue"]:active {
    background: #000;
	color: #fff;
    box-shadow: inset 0 0 3px rgba(255, 165, 0, 0.9); /* Sombra naranja muy intensa */
    transform: translateY(0);
}

/* Estilos para el botón de sincronización */
button[data-action="sync-bpm"] {
    /* Manteniendo la base de button[data-action] y ajustando */
    background: #007bff; /* Un azul para diferenciarlo */
    border: 1px solid #0056b3;
    border-radius: 50%; /* Mantenemos redondo */
    width: 40px;
    height: 40px;
    color: #fff;
    font-weight: bold;
    font-size: 0.8rem;
    text-align: center; /* Esto ya debería estar centrado por display:flex en el base */
    cursor: pointer;
    box-shadow: inset 0 0 5px rgba(0, 123, 255, 0.5);
    /* display: flex; flex-direction: column; justify-content: center; align-items: center; */
    /* Estas propiedades ya están en button[data-action], no necesitas repetirlas aquí */
    user-select: none;
    transition: all 0.2s ease-in-out;
    font-family: 'Arial', sans-serif;
}

button[data-action="sync-bpm"]:hover {
    background: #0056b3;
    box-shadow: inset 0 0 8px rgba(0, 123, 255, 0.7);
    color: #e0f2ff;
    transform: translateY(-1px);
}

button[data-action="sync-bpm"]:active {
    background: #004085;
    box-shadow: inset 0 0 3px rgba(0, 123, 255, 0.9);
    transform: translateY(0);
}
/*Boton parpadea*/
@keyframes blink-green {
  0%, 100% {
    background-color: #000;
	color: #00ff00;              /* Letras verdes para el botón "play" */
    //box-shadow: inset 0 0 8px rgba(0, 255, 0, 0.8);
  }
  50% {
    //background-color: #003300;
	//border-color: #003300; /* Borde blanco */
	color: #000;
    //box-shadow: inset 0 0 15px rgba(0, 255, 0, 1);
  }
}

.blinking-play {
  animation: blink-green 1s infinite;
}

/*Botones de loop*/
/* Estilos generales para los contenedores de los controles de loop */
.loop-controls-deck1, .loop-controls-deck2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}

.loop-controls-deck1 h4, .loop-controls-deck2 h4 {
    margin-bottom: 5px;
    color: white;
}

/* Estilo para el contenedor de la cuadrícula de loops */
.loop-grid {
    display: grid;
    grid-template-columns: repeat(4, 60px);
    grid-template-rows: repeat(2, 60px);
    gap: 0px; /* <<-- ESTO ES CLAVE PARA LA SEPARACIÓN -->> */
    justify-content: center;
    align-items: center;
}

/* Estilo BASE para TODOS los botones con la clase .loop-btn */
.loop-btn {
    width: 60px;
    height: 60px;
    background-color: transparent !important; /* Fondo transparente */
    border: 2px solid #555; /* <<-- BORDE ÚNICO PREDETERMINADO GRIS -->> */
    border-radius: 0px !important; /* Mantiene cuadrados, sobrescribe cualquier herencia */
    color: white !important; /* Texto blanco, sobrescribe cualquier herencia */
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.1s ease; /* Transición para todos los cambios */
    box-shadow: none !important; /* Sin sombra inicial */
    /* REMOVIDO: position: relative; y overflow: hidden; ya no son necesarios sin el pseudo-elemento */
}

/* ELIMINADO EL PSEUDO-ELEMENTO ::before Y SU ESTILO RELACIONADO */

/* Efecto hover para TODOS los .loop-btn */
.loop-btn:hover {
    border-color: #ff3300; /* <<-- BORDE ROJO NEÓN AL PASAR EL RATÓN -->> */
    background-color: transparent !important; /* Asegura que el fondo siga transparente en hover */
    box-shadow: 0 0 8px rgba(255, 51, 0, 0.6) !important; /* <<-- SOMBRA NEÓN AL PASAR EL RATÓN -->> */
    color: white !important; /* Asegura que el texto sea blanco al pasar el ratón */
}

/* Estilo cuando CUALQUIER .loop-btn está activo (loop encendido) */
.loop-btn.active-loop {
    background-color: transparent !important; /* Asegura que el fondo siga transparente cuando activo */
    border-color: #ff3300 !important; /* <<-- BORDE ROJO INTENSO CUANDO ESTÁ ACTIVO -->> */
    box-shadow: 0 0 12px rgba(255, 51, 0, 0.9) !important; /* <<-- SOMBRA MÁS FUERTE PARA ACTIVO -->> */
    color: white !important; /* Mantiene el color blanco del texto cuando está activo */
}

/*Wheels*/
.jog-wheel-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
        }

        .jog-wheel {
            position: relative;
            width: 280px; /* Tamaño base del jog wheel */
            height: 280px;
            border-radius: 50%; /* Lo hace circular */
            background: radial-gradient(circle at 50% 50%, #1a1a1a 0%, #0a0a0a 70%, #000000 100%);
            border: 4px solid #555; /* Borde exterior gris claro */
            box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.4);
            cursor: grab; /* Cursor para indicar que se puede arrastrar */
            transition: box-shadow 0.1s ease-out; /* Transición suave para la sombra */
            user-select: none; /* Evita la selección de texto al arrastrar */
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            touch-action: none; /* Previene el scroll del navegador al arrastrar en táctil */
        }

        .jog-wheel.active {
            cursor: grabbing; /* Cursor al arrastrar */
            box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.9), 0 0 30px rgba(0, 0, 0, 0.6);
        }

        .jog-wheel-center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 120px; /* Tamaño del círculo central */
            height: 120px;
            border-radius: 50%;
            background: radial-gradient(circle at 50% 50%, #2a2a2a 0%, #1a1a1a 70%, #0a0a0a 100%);
            border: 2px solid #444;
            box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .jog-wheel-logo {
            width: 60px; /* Tamaño del logo central */
            height: 60px;
            /* SVG en línea para el logo, similar al de la imagen */
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3C!-- Hexágono exterior --%3E%3Cpolygon points='50,0 93.3,25 93.3,75 50,100 6.7,75 6.7,25' fill='none' stroke='%23AAAAAA' stroke-width='4'/%3E%3C!-- Círculo interior --%3E%3Ccircle cx='50' cy='50' r='20' fill='none' stroke='%23AAAAAA' stroke-width='4'/%3E%3C!-- Líneas radiales (simulando engranaje) --%3E%3Cline x1='50' y1='25' x2='50' y2='0' stroke='%23AAAAAA' stroke-width='2'/%3E%3Cline x1='75' y1='37.5' x2='93.3' y2='25' stroke='%23AAAAAA' stroke-width='2'/%3E%3Cline x1='75' y1='62.5' x2='93.3' y2='75' stroke='%23AAAAAA' stroke-width='2'/%3E%3Cline x1='50' y1='75' x2='50' y2='100' stroke='%23AAAAAA' stroke-width='2'/%3E%3Cline x1='25' y1='62.5' x2='6.7' y2='75' stroke='%23AAAAAA' stroke-width='2'/%3E%3Cline x1='25' y1='37.5' x2='6.7' y2='25' stroke='%23AAAAAA' stroke-width='2'/%3E%3C/svg%3E");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5)); /* Sombra para el logo */
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .jog-wheel {
                width: 200px;
                height: 200px;
                border-width: 3px;
            }
            .jog-wheel-center {
                width: 90px;
                height: 90px;
                border-width: 1px;
            }
            .jog-wheel-logo {
                width: 45px;
                height: 45px;
            }
        }

        @media (max-width: 480px) {
            .jog-wheel {
                width: 160px;
                height: 160px;
                border-width: 2px;
            }
            .jog-wheel-center {
                width: 70px;
                height: 70px;
            }
            .jog-wheel-logo {
                width: 35px;
                height: 35px;
            }
        }

/*PlayList*/
/* Estilos para el botón */
.togglePlaylistButton {
    background: #007bff;
    color: #121212;
    border: none;
    border-radius: 4px;
    padding: 6px 10px;
    cursor: pointer;
    margin-bottom: 15px;
    width: 60px;
    font-weight: bold;
    font-size: 10px;
}

.togglePlaylistButton:hover {
    background-color: #3BB16B;
}

/* Contenedor de la playlist */
#playlistContainer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 250px;
    background-color: #000;
    border-top: 1px solid #333;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.4);
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    z-index: 1000;
    overflow-y: auto;
    padding: 10px;
    box-sizing: border-box;
    color: #eee;
}

/* Clase para mostrar la playlist */
#playlistContainer.is-visible {
    transform: translateY(0);
}

/* --- Estilos de la tabla --- */
#playlist {
    margin-top: 30px;
    width: 100%;
    border-collapse: collapse;
}

#playlist th, #playlist td {
    padding: 8px;
    border-bottom: 1px solid #333;
    text-align: left;
}

#playlist th {
    background-color: #282828;
    color: #4EDF84;
}

/* Estilos para el botón de "Cargar" dentro de la tabla */
.load-btn {
    padding: 4px 8px;
    background: #444;
    border: none;
    color: #eee;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.load-btn:hover {
    background: #4EDF84;
    color: #121212;
}

#log {
  height: 120px;        /* O el alto que quieras */
  overflow-y: auto;
  background: #111;
  color: #0f0;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 10px;
  font-family: monospace;
  white-space: pre-wrap;
}