@import url('https://fonts.googleapis.com/css2?family=Comfortaa&display=swap');
:root {
	--blanco: #fff;
	--negro: #000;
	--amarillo: #ffd900;
	--colorPrincipal: #137913;
	--colorSecundario: #a89ce3;
	--colorSecundario: #7e6fc3;
	--colorSecundario: #9080d5;
	--colorUno: #555;
	--colorDos: #666;
	--colorTres: #888;
	--colorCuatro: #ddd;
	--colorCinco:#f4f4f4;
}
body{ 
	background:var(--blanco);
	font-family:'Comfortaa', sans-serif;
	min-height:50vh;
}
.fondo{ 
	background:url(https://gutenberg.pe/x/libreria/img/Cajamarca.png);
	background-size:cover;
	background-attachment:fixed;
}

.menu {
	/* Estilos para el menú */
	display: none; /* Inicialmente oculto */
}

.container:hover .menu {
	display: block; /* Mostrar el menú al pasar el ratón por encima del contenedor */
}

.row{
	margin:0;
}
.tamanoFuente{
	font-size:14px;
}
.blanco{
	color:var(--blanco);
}
.amarillo{
	color:var(--amarillo);
}
.colorPrincipal{
	color:var(--colorTres);
}
.colorCabeceraTabla{
	color:var(--colorDos);
}
.colorCuerpoTabla{
	color:var(--colorTres);
}
.colorUno{
	color:var(--colorSecundario);
}
.colorDos{
	color:var(--colorPrincipal);
}
.negrita{
	font-weight:bold;
}
.centrar{
	text-align:center;
}
.alineacionIzquierda{
	text-align:left;
}
.alineacionDerecha{
	text-align:right;
}
.alineacionVertical{
	vertical-align:middle;
}
.anchoTotal{
	width:100%;
}
.piePagina{
	border-top:3px solid var(--colorSecundario);
	padding:12px 0;
	/*background:rgba(109, 148, 113, 0.581);*/
	background:rgba(255, 255, 255, 0.9);
}
.seccionPrincipal{
	border-radius:25px 25px 0 0;
	padding:10px 10px 0 10px;
	background:rgba(255, 255, 255, 0.9);
}
.canciones{
	background:var(--colorPrincipal);
}
.imgPrincipal{ 
	width:240px; 
	height:240px; 
}
.imgPrincipalSVG{ 
	fill:var(--colorPrincipal);
}
.enlaces{ 
	text-decoration:none;
}
.fuenteVeinte{ 
	font-size:20px;
}
.buscar{
	width:calc(100% - 120px);
	margin:8px 20px;
	padding:12px 20px;
	box-sizing:border-box;
	border-radius:25px;
	border-color:transparent;
	background-color:var(--colorCinco);
	/*background-color:rgba(248, 248, 248, 0.5);*/
	color:var(--colorPrincipal);
}
.buscarBoton{
	padding:12px 20px;
	margin:8px 0;
	box-sizing:border-box;
	border-radius:25px;
	border-color:transparent;
	background-image:url('https://gutenberg.pe/x/libreria/img/lupa-verde.png');
	background-position:center;
	background-repeat:no-repeat;
	background-size:24px;
	background-color:transparent;
	color:var(--blanco);
}
.buscarBuscar{
	padding:12px 20px;
	margin:8px 0;
	box-sizing:border-box;
	border-radius:25px;
	background-color:var(--blanco);
	color:var(--colorPrincipal);
}
input[type=text] {
	/*width: 100%;
	padding: 12px 20px;
	margin: 8px 0;*/
	box-sizing: border-box;
	border: 3px solid var(--colorCinco);
	-webkit-transition: 0.8s;
	transition: 0.8s;
	outline: none;
}
input[type=text]:focus {
	border: 3px solid var(--colorPrincipal);
	background-color:var(--blanco);
}
li{
	font-size:1em;
	padding:4px 10px;
}
.svgBuscar{
	/*width:12em;*/
	color:var(--colorTres);
}
.detalleCanciones{
	height:calc(100vh - 18.8em);
	overflow:auto;
}
.detalleEstopario, .detalleMisTrabajos{
	height:calc(100vh - 15em);
	overflow:auto;
}
.detalleCanciones::-webkit-scrollbar, .detalleEstopario::-webkit-scrollbar{
	width: 8px;
	background-color: rgba(168, 156, 227, 0.1);
	/*border-radius: 20px;*/
}
.detalleCanciones::-webkit-scrollbar-thumb, .detalleEstopario::-webkit-scrollbar-thumb {
	background-color: var(--colorSecundario);
	/*border-radius: 6px;*/   
}
li.musica:hover, svg:hover{
	color:var(--colorPrincipal);
	cursor:pointer;
}
li.musica.active{
	color:var(--colorSecundario);
	font-weight:bold;
}
.no-seleccionado{
	color:var(--negro);
}
.seleccionado{
	color:var(--amarillo);
}
/*.iconoVolumen{
	margin-bottom:6px;
	cursor:pointer;
}*/
.listadoMusica{
	text-align:left;
}
.tituloReproduccionActual{
	font-size:1.3em;
}
/*.controlVolumen,*/.reproduccionActual, .controles, .progresoCancion{
	position:fixed;
	right:0;
	background:var(--blanco);
	display:inline-block;
}
.reproduccionActual{
	position:fixed;
	height:4.5em;
	right:0;
	background:var(--blanco);
/*	background:rgba(255, 255, 255, 0.0);
	display:inline-block;
	bottom:3em;
	z-index: 16;
}
.controles{
	position:fixed;
	right:0;
	background:var(--blanco);
	background:rgba(255, 255, 255, 0.0);*/
	display:inline-block;
    align-items: center;
	bottom:0;
	z-index: 16;
}
.progresoCancion{
	position:fixed;
	height:0.8em;
	right:0;
	background:var(--negro);
	display:inline-block;
	bottom:4.5em;
	z-index: 8;
}
.btnReproduccion{
	cursor:pointer;
}
/*.progress{
	height:0.8em;
}*/
progress[value]{
	border-radius:0px;
}
progress[value]::-webkit-progress-bar{
	background-color:rgba(255, 255, 255, 0.1);
}
.progress::-webkit-progress-value{
	background-color:rgba(19, 121, 19, 0.6);
}
.progress::-webkit-progress-value:hover{
	background-color:rgba(19, 121, 19, 0.5);
}
/*.informacionReproduccionActual{
	width:300px;
	background-color:var(--colorTres);
	color:var(--blanco);
	font-size:0.8em;
	text-align:left;
	border-radius:6px;
	padding:6px 12px;
	position:absolute;
	z-index:1;
	bottom:200%;
	left:50%;
	transform:translateX(-50%);
	opacity:0;
	transition:opacity 0.8s;
}
.reproduccionActual:hover .informacionReproduccionActual{
	opacity:1;
}*/
/*input[type=range]{
	height:24px;
	-webkit-appearance:none;
}
input[type=range]:focus{
	outline:none;
}
input[type=range]::-webkit-slider-runnable-track{
	width:50%;
	height:5px;
	cursor:pointer;
	animate:0.2s;
	box-shadow:0px 0px 0px var(--negro);
	background:var(--colorSecundario);
	border-radius:8px;
	border:0px solid var(--negro);
}
input[type=range]::-webkit-slider-thumb{
	box-shadow:0px 0px 0px var(--negro);
	border:1px solid var(--colorSecundario);
	height:18px;
	width:18px;
	border-radius:25px;
	background:var(--colorSecundario);A1D0FF;
	cursor:pointer;
	-webkit-appearance:none;
	margin-top:-7px;
}
input[type=range]:focus::-webkit-slider-runnable-track{
	background:var(--colorSecundario);
}
input[type=range]::-moz-range-track{
	width:50%;
	height:5px;
	animate:0.2s;
	box-shadow:0px 0px 0px var(--negro);
	background:var(--colorSecundario);
	border-radius:1px;
	border:0px solid var(--negro);
	cursor:pointer;
}
input[type=range]::-moz-range-thumb{
	width:18px;
	height:18px;
	box-shadow:0px 0px 0px var(--negro);
	background:var(--colorSecundario);A1D0FF;*
	border-radius:25px;
	border:1px solid var(--colorSecundario);
	cursor:pointer;
}
input[type=range]::-ms-track{
	width:50%;
	height:5px;
	animate:0.2s;
	background:transparent;
	border-color:transparent;
	color:transparent;
	cursor:pointer;
}
input[type=range]::-ms-fill-lower{
	background:var(--colorSecundario);
	border:0px solid var(--negro);
	border-radius:2px;
	box-shadow:0px 0px 0px var(--negro);
}
input[type=range]::-ms-fill-upper{
	background:var(--colorSecundario);
	border:0px solid var(--negro);
	border-radius:2px;
	box-shadow:0px 0px 0px var(--negro);
}
input[type=range]::-ms-thumb{
	margin-top:1px;
	box-shadow:0px 0px 0px var(--negro);
	border:1px solid var(--colorSecundario);
	height:18px;
	width:18px;
	border-radius:25px;
	background:var(--colorSecundario);A1D0FF;
	cursor:pointer;
}
input[type=range]:focus::-ms-fill-lower{
	background:var(--colorSecundario);
}
input[type=range]:focus::-ms-fill-upper{
	background:var(--colorSecundario);
}*/
.tabla{		
	display:table;
}
.fila{
	display:table-row;
}
.filaCancion{
	display:table-row;
	cursor:pointer;
}
.cancion:hover{
	color:var(--colorPrincipal);
	font-weight:bold;
	cursor:pointer;
}
.active{
	color:var(--colorPrincipal);
	font-weight:bold;
}
.cabCelda{
	display:table-cell;
	padding-left:5px;
	padding-right:5px;
	border-bottom:1px solid var(--colorSecundario);
}
.celda{
	display:table-cell;
	padding-left:5px;
	padding-right:5px;
	border-top:1px solid var(--colorCuatro);
}
.celdaMenu{
	display:table-cell;
	padding:15px 0;
}
.titulo, .frase, .traduccion{
	/*width:30%;*/
	padding:6px;
}
.artista{
	/*width:30%;*/
	padding:6px;
}
.album{
	/*width:30%;*/
	padding:6px;
}
.duracionCabecera{
	/*width:10%;*/
	padding:6px;
}
.duracion{
	/*width:10%;*/
	/*font-family:Arial Light Regular, Helvetica, sans-serif;*/
	padding:6px;
}
.duracion, .avanceCancion, .duracionCancion{
	font-family:Arial Light Regular, Helvetica, sans-serif;
}
/*.genero{
	display:none;
}*/
.sinResultados{
	column-span:all;
	padding:12px;
}
@media screen and (max-width:1200px){
	/*.titulo{
		width:50%;
	}
	.artista{
		width:30%;
	}*/
	.album{
		display:none;
	}
	/*.duracion{
		width:20%;
	}*/
}
@media screen and (max-width:600px){
	/*.titulo{
		width:80%;
	}*/
	.artista{
		display:none;
	}
	.album{
		display:none;
	}
	/*.duracion{
		width:20%;
	}*/
}