/*
// arnAu bellavista 2025
// RKOR Experience
// Estils CSS Generals
*/

@media all{
	
	body{
		display: flex;
		flex-direction: column;
		font-family: 'Oswald ExtraLight';
		margin: 0;
		padding: 0;
		height: 100vh;
		font-size: 14px;
		line-height: 26px;
		letter-spacing: 2px;
		color: var(--color-text);
		background: var(--color-fons);
		background: linear-gradient(180deg, var(--color-fons), var(--color-fons2));
		transition: var(--transicio);
		overflow-x: hidden;
		overflow-y: hidden;
	}
	a { color:var(--color-primer); text-decoration:none; }
	a:link { color:var(--color-primer); text-decoration:none; }
	a:visited { color:var(--color-primer); text-decoration:none; }
	a:active { color:var(--color-clar); text-decoration:none; }
	a:hover { color:var(--color-clar); text-decoration:none; }
	
	.fons{
		z-index: -1;
		position: fixed;
		right: 0;
		bottom: 0;
		min-width: 100%; 
		min-height: 100%;
	}
	
	.fonsVideo{
		transform: translateX(calc((100% - 100vw) / 2));
		opacity: 0.5;
	}
	
	.fonsFoto{
		
	}
	
	.fonsSoroll{
		/* background: url('../media/soroll02.gif') no-repeat center;
		background-size: cover; */
		opacity: 0.2;
	}
	
	.fonsText{
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
		text-shadow: 0px 0px 8px var(--color-fons);
	}
	.fonsText p{
		font-family: 'Oswald Light';
		font-size: 20px;
		letter-spacing: 2px;
	}
	.fonsText .alerta{
		font-family: 'Oswald Heavy';
		font-size: 50px;
		letter-spacing: 2px;
	}
	.fonsImatge {
		
	}
	.fonsImatge > img {
		max-width: 100%;
		margin: 0;
		position: absolute;
		top: 50%;
		left: 50%;
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	/*
	.ombra{
		text-shadow: 0 2px 4px var(--color-fons);
		box-shadow: 0 0 28px 0px var(--color-fons);
	}
	.ombraSVG{
		filter: drop-shadow(0 0 4px var(--color-fons));
	}
	*/
	hr{
		border: 1px solid var(--color-clar);
	}
	
	main{
		display: flex;
		flex-grow: 1;
		margin: 0 auto;
		width: 100%;
		padding: 0;
		background-color: transparent;
	}
	
	section{
		flex: 2;
		display: flex;
		flex-direction: column;
		margin: 0 auto;
		padding: 0;
		background-color: transparent;
	}
	
	section > header{
		margin: 0;
		padding: var(--marge);
		background-color: transparent;
	}
		header h1{
			font-family: 'Oswald Heavy';
			font-size: 38px;
			margin: var(--marge) 0 0 0;
			opacity: 0.8;
		}
		header p{
			font-family: 'Oswald ExtraLight';
			font-size: 20px;
		}
	.titol{
		width: 100%;
		max-width: 420px;
	}
	
	section > article {
		flex-grow: 1;
		height: 1px;
		margin: 0;
		padding: var(--marge);
		flex-flow: column nowrap;
		overflow-y: auto;
	}
	
	aside {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin: 0;
		padding: 0;
		background-color: transparent;
	}
	
	nav{
		display: flex;
		flex-direction: column;
		height: 170px;
		border-top: 1px solid var(--color-fons);
		background-color: transparent;
	}
	
	/* Audio controls */
	#controlsSup{
		display: flex;
		margin: 0;
		padding: 2px var(--marge-mig);
	}
		#controlsSup div{
			align-self: center;
		}
		
		#audioInfo{
			display: flex;
			gap: var(--marge-mig);
			padding: 0;
			margin: 0 var(--marge);
		}
		#audioInfo div{
			height: 20px;
			margin: 0;
			padding: 4px var(--marge-mig) 8px var(--marge-mig);
			font-size: 14px;
			color: var(--color-text);
			border: 1px solid var(--color-fons);
			border-radius: 2px;
		}
		#time{
			width: 60px;
			text-align: center;
			cursor: pointer;
		}
		#afegeix{
			margin-left: auto;
		}
		#info{
			margin: 0;
			padding: 0 var(--marge-mig);
		}
			.info{
				width: 38px;
				height: 38px;
				background-color: transparent;
				border: 0;
				transition: var(--transicio);
				cursor: pointer;
			}
			.info:hover{
				opacity: 1;
				filter: invert(40%) sepia(27%) saturate(1167%) hue-rotate(354deg) brightness(99%) contrast(93%);
			}
	
	#controls{
		display: flex;
		margin: 0;
		padding: var(--marge-mig);

		border-top: 1px solid var(--color-fons);
	}
		.controls{
			margin: var(--marge);
			padding: 0;
			font-size: 12px;
			line-height: 12px;
			color: var(--color-clar);
			align-self: center;
		}
	
	#directe{
		position: absolute;
		top: 0;
		margin: var(--marge);
		padding: 0;
	}
	
	#opcions{
		display: flex;
	}
	
	#reproductor{
		display: flex;
	}
	
	.audio{
		width: 38px;
		height: 38px;
		margin: 0 4px 0 0;
		padding: 6px;
		vertical-align: baseline;
		background-color: transparent;
		border: 1px solid var(--color-fons);
		border-radius: 4px;
		transition: var(--transicio);
		cursor: pointer;
	}
	.audio img{
		background-color: transaparent;
	}
	.audio:hover{
		opacity: 1;
		filter: invert(40%) sepia(27%) saturate(1167%) hue-rotate(354deg) brightness(99%) contrast(93%);
	}
	.audio:active{
		background-color: var(--color-primer);
	}
	
	.actiu{
		opacity: 1;
	}
	.inactiu img{
		opacity: 0.5;
	}
	
	.actiuOp {
		background-color: var(--color-segon);
		filter: drop-shadow(0 0 6px var(--color-primer));
	}
	.inactiuOp img{
		opacity: 1;
	}
	
	#fitxersContingut{
		padding-bottom: var(--marge);
	}
	#fitxersSubmit{
		display: none;
	}
	/*
	.llistaRepOp{
		width: 32px;
		height: 32px;
		border: 0;
		background-color: transparent;
		margin-top: var(--marge-mig);
		transition: var(--transicio);
		cursor: pointer;
	}
	*/
	
	#barra{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 14px;
		background: var(--color-fons);
		transition: var(--transicio);
	}
	#barraProgres{
		width: 0;
		height: 14px;
		background: var(--color-primer);
		transition: var(--transicio);
	}
	#barra:hover,
	#barra:hover #barraProgres{
		height: 28px;
		cursor: pointer;
	}
	/* Fi audio controls */
	
	.ocult{
		display: none;
	}
	
	
	/* Scrollbar */
	::-webkit-scrollbar {
		width: 14px;
	}
	::-webkit-scrollbar-track {
		background: var(--color-fons2);
	}
	::-webkit-scrollbar-thumb {
		background: var(--color-primer);
		border-radius: var(--arrodonit);
		transition: all var(--transicio) ease;
	}
	::-webkit-scrollbar-thumb:hover {
		background: var(--color-segon);
	}
	
	/* Llista de reproducció */
	#pistes{
		flex-grow: 1;
		overflow-y: auto;
		max-height: calc(100vh - 150px);
	}
	#llistaRep{
		width: calc(100% - var(--marge-doble));
		display: table;
		border-collapse: collapse;
		margin: 80px var(--marge) var(--marge) var(--marge);
		padding: 0;
	}
	.llistaRepTr{
		width: 100%;
	}
	.pista, .llistaRepTr{
		display: table-row;
		border-bottom: 1px solid var(--color-fosc);
		transition: all var(--transicio) ease;
		cursor: pointer;
	}
	.pista:hover .pistaTd{
		color: var(--color-segon);
	}
	.pistaTd, .llistaRepTh{
		display: table-cell;
		font-size: 10px;
		line-height: 16px;
		color: var(--color-text);
		padding: 8px;
		text-align: left;
		vertical-align: top;
	}
	#llistaRep > .pistaActiva .pistaTd{
		color: var(--color-primer);
	}
	#llistaRep > .pistaActiva .dragIcon{
		color: var(--color-fosc);
	}
	.eliminarPista{
		border: 0;
		color: var(--color-fosc);
		background-color: transparent;
		cursor: pointer;
	}
	.eliminarPista:hover{
		color: var(--color-fosc);
	}
	/* DRAG AND DROP */
	.pista > .dragIcon{
		font-size: 18px;
		color: var(--color-fosc);
	}
	.pista:hover .dragIcon{
		color: var(--color-fosc);
	}
		.pista > .dragIcon:hover{
			color: var(--color-segon);
			cursor: grab;
		}
		.pista > .dragIcon:active{
			cursor: grabbing;
		}
	.pistaAvall{
		border-top: 4px solid var(--color-clar);
		transform: translate(0, 4px);
	}
	.pistaAmunt{
		border-bottom: 4px solid var(--color-clar);
		transform: translate(0, -4px);
	}
	/* Fi llista de reproducció */
	
	/* SoundBars00 */
	#audioGraella{
		flex-grow: 1;
		max-width: 500px;
		padding: 0 var(--marge-mig);
		margin: 0 var(--marge-mig) var(--marge-mig) var(--marge-mig);
		margin-left: auto;
	}
	.audioBars{
		display: flex;
		gap: 2px;
		width: 100%;
		height: 100%;
	}
	.audioBar{
		display: flex;
		gap: 2px;
		flex-direction: column;
		flex: 1;
	}
	.audioNode{
		flex: 1;
		border: 1px solid var(--color-fons);
		border-radius: 2px;
	}
	/* fi SoundBar */
	
}








@media all and (max-width: 816px){
	nav{
		height: auto;
	}
	#controls{
		display: auto;
		flex-wrap: wrap;
	}
	.controls{
		margin: var(--marge);
		padding: 0;
		align-self: center;
	}
	#audioGraella{
		width: 100%;
		max-width: 100%;
		height: 80px;
		margin: 0;
		padding: var(--marge);
	}
}







@media all and (max-width: 576px){
	.titol{
		width: 100%;
	}
	.mobilNo{
		display: none;
	}
	
	section{
		flex: 100%;
	}
	
	#pistes{
		width: 100%;
		max-height: 100vh;
	}
	
	#controls,
	#controlsSup{
		margin: 0;
		padding: 0;
	}
	
}






@media all and (max-width: 440px){

}

