@import "color-animation.scss";

.verticalLine {
	position: absolute;
	left: 50%;
	top: 10px;
	width: 2px;
	height: 85%;
	background-color: $color11;
}

.cajon-audio-1 {
	.reproductor-audio-1 {
		padding-left: 0;
		padding-right: 0;
		border-left: 5px solid $color1;

		.iconMusic {
			.iconBg {
				color: $color2;
			}

			.icon {}
		}

		.buttonPlayPause {
			background-color: transparent;
			outline: none;

			.icon {
				color: $color1;
			}
		}

		.timeBar {
			background-color: $color2;
			height: 5px;
			width: 5px;
		}
	}
}

.cajon-libreta-1 {
	cursor: pointer;

	.cabecera-libreta-1 {
		.cajon-texto-1 {
			hr {
				border-top: 4px solid $color5;
				width: 50px;
				margin: 0 auto;
				border-radius: 2px;
			}
		}

		.cajon-imagen-1 {
			background-color: #fff;
			width: auto;
			height: auto;
			border-radius: 50%;
		}
	}

	.cuerpo-libreta-1 {
		border-bottom: 5px solid $color2;
	}

	&:hover {
		box-shadow: 5px 5px 10px -7px rgba(0,0,0,0.75);
	}
}

.cajon-flotante-1 {
	position: fixed;
	top: 280px;
	right: -100%;
	box-shadow: 5px 5px 10px -7px rgba(0,0,0,0.75);
	z-index: 2;

	.cabecera-libreta-1 {
		.botonCerrar {
			position: absolute;
			top: 5px;
			right: 0;
			cursor: pointer;

			.icon {
				color: $color4;
			}

			.bg-icon {
				color: $color5;
			}
		}

		.cajon-texto-1 {
			hr {
				border-top: 4px solid $color5;
				width: 50px;
				margin: 0 auto;
				border-radius: 2px;
			}
		}

		.cajon-imagen-1 {
			background-color: #fff;
			width: 50px;
			height: 50px;
			border-radius: 50%;
		}
	}

	.cuerpo-libreta-1 {
		border-bottom: 5px solid $color2;

		.areaNotas {
			max-width: 100%;
		}

		.buttonNotas {
			background-color: rgba(0, 0, 0, 0);
			color: $color5;
			padding: 0.5em 1em;
			font-size: 1.3em;
			border-left: 2px solid $color5;
			// border-right: 2px solid $color5;
			outline: none;

			&:last-child {
				border-left: 2px solid $color5;
				border-right: 2px solid $color5;
			}
		}

		.rowBotones {
			background-color: #90C5DA;
		}
	}
}

.cajon-recursos-1 {
	.cabecera-recursos-1 {
		.cajon-texto-1 {
			hr {
				border-top: 4px solid $color15;
				width: 50px;
				margin: 0 auto;
				border-radius: 2px;
			}
		}
	}

	.cuerpo-recursos-1 {
		border-bottom: 5px solid $color2;
		background-color: #F7F7F8;

		.link-descarga-1 {
			border: 3px solid $color9;
			padding: 0.5em 1.5em;
			border-radius: 20px;

			&:hover {
				border: 3px solid $color3;
				color: $color3;
				i {
					color: $color3;
				}
			}
		}
	}
}

.cajon-ejemplo-1 {
	.cabecera-ejemplo-1 {
		.cajon-texto-1 {
			hr {
				border-top: 4px solid $color15;
				width: 50px;
				margin: 0 auto;
				border-radius: 2px;
			}
		}
	}

	.cuerpo-ejemplo-1 {
		border-bottom: 5px solid $color14;
		background-color: #F7F7F8;

		.link-descarga-1 {
			border: 3px solid $color9;
			padding: 0.5em 1.5em;
			border-radius: 20px;

			&:hover {
				border: 3px solid $color3;
				color: $color3;
				i {
					color: $color3;
				}
			}
		}
	}
}

.cajon-tab-1 {
	.fila-botones-tab-1 {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: stretch;
		flex-wrap: wrap;
		background-color: #EFF0F1;
		border-bottom: 5px solid $color2;
		.cajon-boton-1 {
			flex-grow: 0;
			cursor: pointer;
			&:hover {
			}
		}
		.cajon-boton-2 {
			flex-grow: 2;
			cursor: pointer;
			user-select: none;
			background-color: #BCDDE8;
			&:hover {
				background-color: #5cbcdd;
			}
		}

		.activo {
			background-color: $color2;
			.texto-contenido-1 {
				color: $color5;
			}
		}
	}

	.fila-info-tab-1 {
		border-bottom: 5px solid #E6E7E8;
	}
}

.cajon-desplegable-1 {
	.botonDesplegable-1 {
		background-color: #EFF0F1;
		border-bottom: 5px solid $color2;
		cursor: pointer;
		user-select: none;
	}
	.infoDesplegable-1 {
		border-bottom: 5px solid #E6E7E8;
	}
}

.cajon-idea-1 {
	.cabecera-idea-1 {
		.cajon-texto-1 {
			hr {
				border-top: 4px solid $color5;
				width: 50px;
				margin: 0 auto;
				border-radius: 2px;
			}
		}

		.cajon-imagen-1 {
			background-color: #fff;
			width: 50px;
			height: 50px;
			border-radius: 50%;
		}
	}

	.cuerpo-idea-1 {
		border-bottom: 5px solid $color1;
		background-color: #F7E7EF;
	}
}

.cajon-actividad-1 {
	.cabecera-actividad-1 {
		.cajon-texto-1 {
			hr {
				border-top: 4px solid $color5;
				width: 50px;
				margin: 0 auto;
				border-radius: 2px;
			}
		}

		.cajon-imagen-1 {
			background-color: #fff;
			width: 50px;
			height: 50px;
			border-radius: 50%;
		}
	}

	.cuerpo-actividad-1 {
		border-bottom: 5px solid $color3;
		background-color: #EEF7EC;

		.cajon-recurso-1 {
			.embed-activity {
/*				  padding-bottom: 109%;*/
			}
		}
	}
}

.cajon-creditos-1 {
	.cabecera-creditos-1 {
		.cajon-texto-1 {
			hr {
				border-top: 4px solid $color5;
				width: 50px;
				margin: 0 auto;
				border-radius: 2px;
			}
		}

		.cajon-imagen-1 {
			background-color: #fff;
			width: 50px;
			height: 50px;
			border-radius: 50%;
		}
	}

	.cuerpo-creditos-1 {
		border-bottom: 5px solid $color4;
		background-color: #EFF0F1;
	}
}

.zoomBoxImg {
	a {
		cursor: zoom-in;
		.imagen-1 {
			opacity: 1;
		}
	}

	&:hover {
		a {
			.imagen-1 {
				opacity: 0.4;
			}
		}
	}
}

// MEDIA QUERIE PARA LA LIBRETA FLOTANTE
@media screen and (max-width: 425px) and (min-width: 320px) {
	.cajon-flotante-1 {
		top: 20px;
		.cuerpo-libreta-1 {
			.cajon-instrucciones-1 {
				max-height: 150px;
				overflow-y: auto;
			}
		}
	}
}

@media screen and (max-width: 768px) and (min-width: 320px) {
	.verticalLine {
		display: none;
	}

	.cajon-tab-1 {
		.fila-menu-principal-1 {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: stretch;
		}
	}
}
@media screen and (min-width: 769px) {
	.verticalLine {
		display: block;
	}

	.cajon-tab-1 {
		.fila-botones-tab-1 {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: stretch;
			.cajon-boton-1 {
				flex-grow: 0;
			}
			.cajon-boton-2 {
				flex-grow: 2;
			}
		}
	}
}
@media screen and (max-width: 991px) and (min-width: 320px) {
	.verticalLine {
		display: none;
	}
}
